jquery数据表服务器端分页答案

【问题标题】：jquery data table server side pagingjquery数据表服务器端分页
【发布时间】：2018-09-04 11:44:49
【问题描述】：

您好，我们使用 jquery 数据表，到目前为止，我们可以进行 api 调用并加载数据。我的服务器端代码 -

   string headers = "\"total\": \"" + totalPages + "\", \"columnNames\": \"" + columnNames + "\", \"page\": \"" + page + "\", \"records\": \"" + totalrows + "\"";


                        responsetoken.content = functions.Serialize(ldData).Insert(1, headers + ", ");

和我的客户端代码 -

   $.ajax({
                url: 'staticreport',
                data: JSON.stringify({
                     startDate: that.startDate, endDate: that.endDate
                }),
                cache: false,
                datatype: "json",
                type: "PUT",
                success: function (data) {
                    if (data.StaticReportList != null) {

                      var columns = [];
                        var colName = data.columnNames.split(',');
                        console.log(colName);
                        for (var i in colName) {
                            columns.push({ data: colName[i], title: colName[i] });
                        }
                        console.log(columns);
                        console.log(columns.data);
                        $('#grid').DataTable({
                            data: data.StaticReportList,
                            columns: columns
                        });
                    }
                    that.mainView.ajaxDecrement();
                }
            });

我想将分页放入数据表中，每次点击后都会调用 api 并获取下一组记录，当时我只带 100 条记录和总记录数来创建分页。

这就是我的对象的样子

如何在数据表中应用服务器端分页？

【问题讨论】：

标签： jquery api datatables

【解决方案1】：

ajax 页面应该是分割数据的页面。如果您监控您的请求和响应，例如，如果用户单击页面“3”，则获取 URL 或发布参数将包含 &iDisplaystart 和 &iDisplaylength

如果您一次显示 50 条记录，&iDisplaylength 将为 50。

Ff 用户点击“3”，&iDisplaystart 将为 100 （第0页从0开始，第1页从50开始，第2页从100开始，第3页......）

您的 ajax 页面必须能够读取请求变量并包含发送回 50 条记录（从请求变量中读取）的逻辑，从第 100 条记录（从请求变量中读取）开始。 URL 中还包括列排序顺序和过滤值（如果使用）。

您的 json 响应的开头应该类似于

{ "iTotalRecords":  # of total records in your data set ,
"iTotalDisplayRecords":  # of total records that match the filter or search value,
"data": [
... your jSON data starting at record 100, and running for 50 records
]
}

【讨论】：

【解决方案2】：

这是数据表服务器端处理https://datatables.net/manual/server-side 的文档。我认为您应该根据下拉列表和分页来确定记录的大小。您可以将length（用于数据库限制）和start（用于偏移）参数发送到您的服务器。

Datatables 总是将其参数发送到您的服务器，您可以通过查看浏览器开发工具中的network 选项卡或文档来检查它。要为您的查询添加其他参数，您可以将方法 data 添加到您的 ajax 请求中，如下所示，它接受 Datatables 的原始参数。

          $("#table").DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: 'staticreport',
                    data: function (d) {
                        d.startDate = $("#startDate").val();
                        d.endDate = $("#endDate").val();
                    }
                }
           });

希望这能有所帮助。

【讨论】：