使用 DataTables 插件的服务器端分页

Posted 2023-02-21

【中文标题】使用 DataTables 插件的服务器端分页

【英文标题】：Server side pagination using DataTables plugin

【发布时间】：2014-11-13 11:53:12

【问题描述】：

服务器每页返回 15 条记录，总记录超过 2000 条。我想显示前 15 条记录，然后在每次单击“下一步”按钮时显示剩余的所有记录，（每页 15 条）。 为此，我们是做服务器端分页还是客户端？

这是我的表格和我在DataTables 中用于分页的属性：

  var tableData = self.accountCollection.getData();

        var tableColumns = this.accountCollection.getColumns();
        var totalRecs = this.accountCollection.length;

        //create the UI grid containing the list of items

        this.resultsTable = tableEl.dataTable( 
            "bServerSide": true,
            "sEcho": 3,
            "iTotalRecords": totalRecs,
            "iTotalDisplayRecords": 15,
            "aaData": tableData,
            "aoColumns": tableColumns,
            "aaSorting": [[1,'asc']],
           );



getData: function () 

        var returnData = [];
        $.each(this.models, function (idx, accountModel) 
            returnData.push(accountModel.attributes);
        );
        return returnData;
    ,

returnData 将返回一个包含字段的对象，我将在表格中填充字段。

返回的对象（大致）：

Object
 accountName: "No Company"
 address1: "1234 asdf"
  address2: ""
  billingAcctId: null
  billingSystem: null
  city: "mountain view"
  comments: null
   country: "USA"

然后将调用 getData() 函数以使用以下方法从数据库中返回数据：

var tableData = this.accountCollection.getData()

所以基本上 tableData 将有必要的字段和值显示在表中。现在我可能从服务器返回了 1000 多条记录。因此我需要分页。

小提琴中的那个是我尝试过的，对分页没有任何影响。

我想我有 DataTables 附带的基本分页，但现在我需要有一个服务器端，一次只能显示 15 条记录，然后单击“下一个”和“上一个”按钮 i应该能够进行 ajax 调用以获取每页 15 条的剩余记录。

我希望这可以帮助您更好地理解。如果您需要更多详细信息，请告诉我。

如何使用 DataTables 实现分页？

谢谢

【参考方案1】：

分页工程总显示记录您需要执行以下最小更改。

"iTotalDisplayRecord" 将是总过滤记录

【参考方案2】：

这会查找你的小巷 -> http://datatables.net/examples/data_sources/js_array.html 它纯粹是客户端

不过，据我所知，实现实际分页的唯一方法（使其更快，因为您一次只能从数据库中获取 15 条记录）是通过服务器端的 ajax-ing（即@987654322 @)

在我看来你并没有这样做。除非... self.accountCollection.getData() 是一个 ajax 回调，但无论如何，当您实例化 DataTable 时，您应该使用“ajax: tableData”而不是“aaData: tableData”。

您可能会将数据表返回的 JSON 与用于与数据表交互/初始化的数据表 API 混淆。

抱歉，这有点过头了，这有意义吗？

【讨论】：

好吧，'self.accountCollection' 是从服务器获取用户列表：如下所示.. this.accountCollection = new ipiadmin.collections.AccountCollection();进行客户端调用还有意义吗？

您可以覆盖 self.accountCollection 以在它获取的 JSON 中包含分页详细信息。基本上，您希望您的 JSON 看起来像 "sEcho": 15,"iTotalRecords": 2000, "iTotalDisplayRecords": 2000,"aaData": [your first 15 rows of data] 然后使用 self.accountCollection 作为数据表 init 中的 ajax 源。另外，只是好奇，您的堆栈（客户端和服务器）是什么？

有什么方法可以提供一个例子...谢谢您的帮助！

这是一个fiddle（基本上只是数据表example的一个副本）。这可能是用你所拥有的东西来启动和运行的最简单的方法。很抱歉造成混乱，我之前错了，你不能将“ajax”参数与回调函数一起使用（我在想jQuery在ajax回调上的成功）。如果你想 ajax 它（真正的分页），你需要像 php 脚本或其他东西一样点击后端的源代码（即 self.accountCollection.getData() 是如何实际工作的？）。