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

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

 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>