将动态结果显示到数据表<tbody>时分页不起作用

using datatable (bootstrap) 我正在显示ajax的结果在datatable .结果添加到datatable但是分页不能在新结果上工作，因为页面只加载一次。对新显示的结果进行分页处理的对象。提前谢谢。

 <script>
    $(document).ready(function () {
         $('.dataTables-example').dataTable();
     });
                    var data = $.parseJSON(responseData);
                    var tbl_op ='';
                    $.each(data.result,function(k,v){
                        console.log(v.id);
                        $('.dataTables-example').dataTable();
                        tbl_op +="<tr class='odd gradeX'>"+
                            '<td>'+v.id+'</td>'+
                            '<td>'+v.country_name+'</td>'+
                            '<td>'+v.created+'</td>'+
                           '<td>'+'<a href="#" onclick="edit('+v.id+','+v.country_name+')">Edit</a></td>'+
                          '</tr>';   
                    });
                    $('#country_list').html(tbl_op);
                     $('#Response').fadeIn(1000);
                     $('#Response').html(data.response_msg);
                     $('#Response').fadeOut(8000);
             </script>
             <div class="table-responsive">
                  <table class="table table-striped table-bordered table-hover dataTables-example" id="dataTables-example">
                    <thead>
                      <tr>
                        <th>Id</th>
                        <th>Country</th>
                         <th>Date</th>
                         <th>Action</th>
                      </tr>
                    </thead>
                    <tbody id='country_list'>

                    </tbody>
                  </table>
                </div>

结果:

<tbody id="country_list"><tr class="odd gradeX"><td>1</td><td>India</td><td>2016-09-13 11:33:30</td><td><a href="#" onclick="edit(1,India)">Edit</a></td></tr><tr class="odd gradeX"><td>2</td><td>Usa</td><td>2016-09-13 11:33:30</td><td><a href="#" onclick="edit(2,Usa)">Edit</a></td></tr><tr class="odd gradeX"><td>3</td><td>Russia</td><td>2016-09-13 11:33:30</td><td><a href="#" onclick="edit(3,Russia)">Edit</a></td></tr><tr class="odd gradeX"><td>4</td><td>R1</td><td>2016-09-13 11:33:42</td><td><a href="#" onclick="edit(4,R1)">Edit</a></td></tr><tr class="odd gradeX"><td>5</td><td>R5</td><td>2016-09-13 11:34:30</td><td><a href="#" onclick="edit(5,R5)">Edit</a></td></tr><tr class="odd gradeX"><td>6</td><td>R6</td><td>2016-09-13 11:34:40</td><td><a href="#" onclick="edit(6,R6)">Edit</a></td></tr><tr class="odd gradeX"><td>7</td><td>R7</td><td>2016-09-13 11:34:48</td><td><a href="#" onclick="edit(7,R7)">Edit</a></td></tr><tr class="odd gradeX"><td>8</td><td>R8</td><td>2016-09-13 11:34:54</td><td><a href="#" onclick="edit(8,R8)">Edit</a></td></tr><tr class="odd gradeX"><td>9</td><td>R9</td><td>2016-09-13 11:35:00</td><td><a href="#" onclick="edit(9,R9)">Edit</a></td></tr><tr class="odd gradeX"><td>10</td><td>R10</td><td>2016-09-13 11:35:07</td><td><a href="#" onclick="edit(10,R10)">Edit</a></td></tr><tr class="odd gradeX"><td>11</td><td>R11</td><td>2016-09-13 11:35:13</td><td><a href="#" onclick="edit(11,R11)">Edit</a></td></tr><tr class="odd gradeX"><td>12</td><td>R12</td><td>2016-09-13 11:35:25</td><td><a href="#" onclick="edit(12,R12)">Edit</a></td></tr><tr class="odd gradeX"><td>13</td><td>R67</td><td>2016-09-13 11:37:30</td><td><a href="#" onclick="edit(13,R67)">Edit</a></td></tr></tbody>

为了在XHR请求上更新分页，还需要有关于分页的信息。即:

当前页码
条目总量
每页显示的条目数量

此信息应随XHR请求一起返回。例如，您可以将这些属性添加到结果对象(result.currentPage, result.totalPages, result.totalEntries)。

现在，对于每个并发请求，您应该将这些参数发送给服务器，服务器应该根据这些参数获取适当的数据集。

最后但并非最不重要的是，有了这些数据，您可以重新计算分页元素的状态。

另一种选择:

如果您从服务器下载完整的数据集(在您的示例中似乎就是这种情况)，您应该在JavaScript代码中保留分页所需的参数(entriesPerPage, currentPage, totalEntries)，以便您可以跟踪分页状态并更新分页组件。

请注意，使用一个XHR请求下载所有数据可能会导致应用程序出现瓶颈。想象一下，拥有数万条记录的数据集将会占用您的带宽，或者更糟的是:占用JavaScript所消耗的内存。这就是为什么我建议选择#1

另一种选择:

相关内容

最新更新

热门标签：