Javascript 通过AJAX刷新时，所有dataTable页面都将成为一个页面

我试图从本页实施本指南：

我设法实现了它，不幸的是，客户端数据表在刷新时被破坏

通过销毁，dataTable中的所有数据都在一个页面中

这是桌子

<table id="earnings_amendment_account" class="table table-bordered" style="table-layout: fixed; display: none">
                <thead>
                <th></th>
                  <th>Account Code</th>
                  <th>Account Title</th>
                  <th>Account Type</th>
                  <th>Tools</th>
                </thead>
<tbody id="table-body">
 <?php include 'tableBody.php';?>
                </tbody>
              </table>

这是被调用的模态

<form autocomplete='off' id="myForm" class="form-horizontal" method="POST" action="earnings_amendment_account_add.php">

<!-- Table Loader -->
<div class="form-group" id="earnings_amendment_account_modalload">
<div class="col-sm-9" id= "earnings_amendment_account_modalload" style="width:100%">
</div></div>

                <div class="form-group">
                    <label for="accounttitle" class="col-sm-3 control-label">Account Title</label>

                    <div class="col-sm-9">
                        <input type="text" autocomplete="off" class="form-control" id="accounttitle" name="accounttitle" style="text-transform:uppercase;width:90%" required>
                    </div>
                </div>
                <div class="form-group" hidden>
                    <label for="postedby" class="col-sm-3 control-label">Posted By</label>

                    <div class="col-sm-9">
                        <input type="text" autocomplete="off" class="form-control" id="postedby" name="postedby" value="<?php echo $user['firstname'].' '.$user['lastname']; ?>" required>
                    </div>
                </div>
                <div class="form-group" hidden>
                    <label for="dateposted" class="col-sm-3 control-label">Posted By</label>

                    <div class="col-sm-9">
                        <input type="text" autocomplete="off" class="form-control" id="dateposted" name="dateposted" value="<?php echo gmdate('Y-m-d h:i:s'); ?>" required>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default info btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                <button type="button" onclick="SubmitFormData();" class="btn btn-primary btn-flat" name="add"><i class="fa fa-save"></i> Save</button>
                <div id="results"></div>
                </form>

帐户名称
邮寄人
尝试使用datatable对象
var收益_修正_账户_表=$（'#收益_修正_账户'）。数据表（{}）

因此，在jQuery/AJAX-（earnings_amendment_account.php）上更改
$（“#earnings_amendment_account”）.DataTable（）.AJAX.reload（）
to
earnings\u amendment\u account\u table.ajax.reload（）
@riggsfully，抱歉，我将对此进行研究。此外，网上还有1000本关于AJAX过程的教程。使用其中一个问题，而不是一个简单的问题
function SubmitFormData() {
    var add = $("#add").val();
    var add_accountcode = $("#add_accountcode").val();
    var accounttitle = $("#accounttitle").val();
    var accounttype = $("#accounttype").val();
    var postedby = $("#postedby").val();
    var dateposted = $("#dateposted").val();
    $.post("earnings_amendment_account_add.php", 
    { 
    add: add,
    add_accountcode: add_accountcode,
    accounttitle: accounttitle,
    accounttype: accounttype,
    postedby: postedby,
    dateposted: dateposted
    },
       function(data) {
         $('#results').html(data);
         $('#myForm')[0].reset();
         $.get("tableBody.php", function(data) {
         $("#table-body").html(data);
         $("#earnings_amendment_account").DataTable().ajax.reload();
        });
    });
}

<form autocomplete='off' id="myForm" class="form-horizontal" method="POST" action="earnings_amendment_account_add.php">

<!-- Table Loader -->
<div class="form-group" id="earnings_amendment_account_modalload">
<div class="col-sm-9" id= "earnings_amendment_account_modalload" style="width:100%">
</div></div>

                <div class="form-group">
                    <label for="accounttitle" class="col-sm-3 control-label">Account Title</label>

                    <div class="col-sm-9">
                        <input type="text" autocomplete="off" class="form-control" id="accounttitle" name="accounttitle" style="text-transform:uppercase;width:90%" required>
                    </div>
                </div>
                <div class="form-group" hidden>
                    <label for="postedby" class="col-sm-3 control-label">Posted By</label>

                    <div class="col-sm-9">
                        <input type="text" autocomplete="off" class="form-control" id="postedby" name="postedby" value="<?php echo $user['firstname'].' '.$user['lastname']; ?>" required>
                    </div>
                </div>
                <div class="form-group" hidden>
                    <label for="dateposted" class="col-sm-3 control-label">Posted By</label>

                    <div class="col-sm-9">
                        <input type="text" autocomplete="off" class="form-control" id="dateposted" name="dateposted" value="<?php echo gmdate('Y-m-d h:i:s'); ?>" required>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default info btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                <button type="button" onclick="SubmitFormData();" class="btn btn-primary btn-flat" name="add"><i class="fa fa-save"></i> Save</button>
                <div id="results"></div>
                </form>

function format ( dataSource ) {
    var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" class="table table-bordered">';
    for (var key in dataSource){
        html += '<tr>'+
                   '<td>' + key             +'</td>'+
                   '<td>' + dataSource[key] +'</td>'+
                '</tr>';
    } return html += '</table>';  }
var earnings_amendment_account_table = $('#earnings_amendment_account').DataTable({});

      // Add event listener for opening and closing details
      $('#earnings_amendment_account').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = earnings_amendment_account_table.row(tr);

          if (row.child.isShown()) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
          } else {
              // Open this row
              row.child(format({
                  'Posted By : ' : tr.data('key-1'),
                  'Date Posted : ' : tr.data('key-2'),
                  'Approved By : ' :  tr.data('key-3'),
                  'Date Approved : ' :  tr.data('key-4')
              })).show();
              tr.addClass('shown');
          } });