JqueryUI 数据表设置记录总数

Posted 2023-05-09

【中文标题】JqueryUI 数据表设置记录总数

【英文标题】：JqueryUI Datatables set recordsTotal

【发布时间】：2019-10-19 08:43:35

【问题描述】：

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

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

我用 ajax 响应返回 recordsTotal，就像你在服务器端处理的方式一样，并使用它来确定要发出多少块/后台 ajax 请求。但是，我找不到要在表上设置的设置或函数来覆盖总记录数。我想避免重新绘制 html，因为它感觉有点不稳定，并且希望后台加载对最终用户更不可见。

这可能吗？ 谢谢！

【问题讨论】：

听起来，就像您正在重新发明 DataTables server-side processing。您是否有理由不能使用现有的？

【参考方案1】：

如果可能，我会在服务器端处理中使用构建。但如果你真的想改变总记录的值，你可以覆盖fnRecordsTotal-方法。

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

【讨论】：

做到了！谢谢！