使用Jquery将大列表呈现到表中

Question

我有一个很大的清单，我将其分为500个大小，然后根据需要一次将它们呈现给客户。 我正在使用以下Java脚本代码将列表呈现到表中。

 var counter; $(document).ready(function() { var table = $('#example').DataTable(); $('#example tbody').on('click', 'tr', function() { $(this).toggleClass('selected'); }); $('#button').click(function() { alert(table.rows('.selected').data().length + ' row(s) selected'); }); }); function getData(submit) { var pointer; var msg = ""; var company = ""; if (submit == 1) { //On click of get more counter += 500; pointer = counter; } else { //On load counter = 500; pointer = 500; } $.ajax({ type: "GET", url: "/biz/getListOfFreeMembers", data: { limit: pointer }, success: function(data) { $.each(data, function(i, obj) { var t = $('#example').DataTable(); t.row.add([ obj.companyName, obj.mobileNo, obj.companyWebsite, obj.firstName, obj.address, obj.createDate ]).draw(); }); }, error: function(e) { alert("error" + e.Message); } }); } 

 <link href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <div id="demo" class="col-sm-12"> <div class="table-responsive"> <table id="example" class="table"> <thead> <tr> <th>Company Name</th> <th>Mobile Number</th> <th>Website</th> <th>Person Name</th> <th>Address</th> <th>Date of Creation</th> </tr> </thead> <tbody id="list_of_users"> </tbody> </table> </div> </div> <a href="javascript:getData('1')">Get more data</a> 

该表第一次正确呈现，但是当我单击“获取更多数据”链接时，新数据集未追加到现有数据集中，而是先显示新数据集，然后再显示旧数据集，依此类推每次点击可获得更多数据。 请提出一种将新数据集附加到表中旧数据集的方法。 谢谢。

Answer 1

您的代码运行正常。 （检查此代码笔）

• 可能是您缺少页面编号在增加（意味着新数据将在下一页上显示）

• 或者可能是您的服务没有响应数据（请检查网络控制台）

 var counter=0; var t=null; var url = 'tableData'; $(document).ready(function() { t = $('#example').DataTable(); t .column( '0:visible' ) .order( '' ) .draw(); $('#example tbody').on('click', 'tr', function() { $(this).toggleClass('selected'); }); $('#button').click(function() { alert(t.rows('.selected').data().length + ' row(s) selected'); }); getData(); }); function getData(submit) { $('#loading').show(); var pointer=0; var msg = ""; var company = ""; if (submit == 1) { //On click of get more counter += 500; pointer = counter; url = 'tableData2'; } else { //On load counter = 500; pointer = 500; url = 'tableData'; } $.ajax({ contentType: "application/json", type: "GET", url: "http://demo2315600.mockable.io/" + url, success: function(data) { $('#loading').hide(); //alert('asd'); $.each(data, function(i, obj) { t.row.add([ obj.companyName, obj.mobileNo, obj.companyWebsite, obj.firstName, obj.address, obj.createDate ]).draw(); }); }, error: function(e) { alert("error" + e.Message); } }); } 

 <link href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <div id="demo" class="col-sm-12"> <div class="table-responsive"> <table id="example" class="table"> <thead> <tr> <th>Company Name</th> <th>Mobile Number</th> <th>Website</th> <th>Person Name</th> <th>Address</th> <th>Date of Creation</th> </tr> </thead> <tbody id="list_of_users"> </tbody> </table> </div> </div> <a href="javascript:getData('1')">Get more data</a> <span id="loading" style="display:none;">pleas wait Load Data</span>