Question

使用数据表（bootstrap） 我在数据表的一部分中显示ajax的结果。结果ged已添加到datable但是 分页无法处理新结果，因为页面只加载一次。分页是否适用于新显示的结果。提前谢谢。

 <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>

Answer 1

为了更新XHR请求的分页，您还需要获得有关分页的信息。那就是：

当前页码
参赛作品总数
每页显示的条目数量

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

现在有了每个并发请求，您应该将这些参数发送到服务器，服务器应该根据这些参数获取正确的数据集。

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

另一种选择：

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

请注意，使用一个XHR请求下载所有数据可能会导致您的应用程序出现瓶颈。想象一下，拥有成千上万条记录的数据集将对您的带宽产生影响，甚至更糟：使用JavaScript消耗的内存。这就是我建议选项＃1的原因。

当动态结果显示到数据表时，分页不起作用

1 个答案:

另一种选择：