JqueryUI 数据表设置 recordsTotal

Question

使用客户端处理时是否可以手动设置 recordsTotal 属性？

我构建的内容有点类似于延迟加载，其中 table 加载了初始数据块（目前价值 5 页。）然后一旦加载，它会做一堆后台 ajax 次调用以加载剩余数据。这使得 table 可以非常快速地加载和响应，同时还允许客户端排序和过滤的速度。但是发生了什么，记录计数将显示“50”开始，然后当 ajax 调用完成时它将跳到 300、600 等，同样页面选择器显示 5，然后 30 等。

我 return 带有 ajax 响应的 recordsTotal，与服务器端处理的方式相同，并使用它来确定有多少 chunks/background ajax 请求制作。但是我找不到要在 table 上设置的设置或函数来覆盖总记录数。我想避免 html 必须重新绘制，因为它感觉有点不稳定，并且希望后台加载对最终用户更不可见。

这可能吗？谢谢！

Answer 1

如果可能，我会使用 server-side-processing 中的构建。但是如果你真的想改变总记录的值，你可以覆盖 fnRecordsTotal-method.

$(document).ready(function() {
  
  $.fn.dataTable.models.oSettings.fnRecordsTotal = function () { return 42; };
  
  let datatable = $('#table_id').DataTable();
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="table_id" class="display">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1: Test1</td>
      <td>Row 1 Data 2: Test2</td>
    </tr>
    <tr>
      <td>Row 2 Data 1 (Lorem)</td>
      <td>Row 2 Data 2 (Ipsum)</td>
    </tr>
  </tbody>
</table>

JqueryUI 数据表设置 recordsTotal

JqueryUI Datatables set recordsTotal

jquery

jquery-ui

datatables