jQuery DataTable 无法在 javascript 中使用 ajax

Question

我正在使用 jQuery 数据表来显示内置响应式和分页的表格。 我正在使用 ajax 动态调用的 javascript

我的桌子看起来像

var xmlhttp = new XMLHttpRequest();
var url = '/../view_history/' + userId + '/' + networkId ;

  xmlhttp.open('GET', url, true);
  xmlhttp.send();

  xmlhttp.onreadystatechange = function() {

  if (xmlhttp.readyState === 4) {

    if (xmlhttp.status === 200) {
      var json_data = JSON.parse(xmlhttp.responseText);
                            
      var result = json_data.result;
      if (result == 'success') {
      /* Proceess using for loop data and then append that dynamic data in <tbody> */
       document.getElementById('deposit').innerHTML += sr + emaili + coini + address + '</td><td>' + txnhash.substring(0, 12) + '...' + '</td><td>' + amount + '</td><td>' + txn_fee + '</td><td>' + Net_bal + '</td><td>' + time + '</td></tr>'
     }
    }
   }
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered table-hover">
   <thead>
<tr>
  <th>#</th>
  <th>Email Id</th>
 <th>Network</th>
 <th>Type</th>
 <th>Address</th>
 <th>Transaction</th>
 <th>Amount</th>
 <th>Txn Fee</th>
 <th>Net_Bal</th>
 <th>Time</th>
  </tr>
</thead>
  <tbody id='deposit'>

 </tbody>
</table>

并调用jquery DataTable函数如下。

<script>
        $(function() {
            $('#example1').DataTable();
        });
        </script>

它显示所有记录，但它没有响应，分页，排序根本不起作用。请帮我解决这个问题。

Answer 1

在使用数据更新表后尝试调用DataTable()（在 API 响应中）。

var xmlhttp = new XMLHttpRequest();
var url = '/../view_history/' + userId + '/' + networkId ;

  xmlhttp.open('GET', url, true);
  xmlhttp.send();

  xmlhttp.onreadystatechange = function() {

    if (xmlhttp.readyState === 4) {

      if (xmlhttp.status === 200) {
        var json_data = JSON.parse(xmlhttp.responseText);
                            
        var result = json_data.result;
        if (result == 'success') {
          /* Proceess using for loop data and then append that dynamic data in <tbody> */
          document.getElementById('deposit').innerHTML += sr + emaili + coini + address + '</td><td>' + txnhash.substring(0, 12) + '...' + '</td><td>' + amount + '</td><td>' + txn_fee + '</td><td>' + Net_bal + '</td><td>' + time + '</td></tr>';

          // call the DataTable();
          $('#example1').DataTable();
        }
      }
    }
  }

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="example1" class="table table-bordered table-hover">
   <thead>
<tr>
  <th>#</th>
  <th>Email Id</th>
 <th>Network</th>
 <th>Type</th>
 <th>Address</th>
 <th>Transaction</th>
 <th>Amount</th>
 <th>Txn Fee</th>
 <th>Net_Bal</th>
 <th>Time</th>
  </tr>
</thead>
  <tbody id='deposit'>

 </tbody>
</table>