JQuery DataTables 服务器端分页

Posted 2023-03-10

【中文标题】JQuery DataTables 服务器端分页

【英文标题】：JQuery DataTables server-side pagination

【发布时间】：2012-07-18 11:22:24

【问题描述】：

在我的网络应用程序中，我使用 JQuery DataTables 插件来显示从数据库检索到的数据。

我目前正在使用客户端分页，但我的表格中的数据增长了很多，并且在 ASP.NET 页面中的加载现在变得有点慢。所以我打算切换到服务器端分页。

我知道DataTables插件支持它，但是搜了一圈发现不清楚实现它。

我的主要疑问是：如果我在服务器端实现分页，我还必须实现排序，或者我可以将它委托给客户端？

你有过这样的经历吗？

注意我正在使用 Linq to SQL 连接到我的数据库

【问题讨论】：

如何连接到您的数据库？ Linq to SQL、EF、NH、DataSet？

@Jupaol 我正在使用 Linq to SQL

【参考方案1】：

现有答案可能适用于旧版本的 dataTable，但当前版本（我使用的是 1.10+）传递了开始记录和长度，因此任何建议 pageNo * pageSize 的东西都会给出不正确的结果.

第一个简单的“手动”方法

接受的答案对于我想做的事情也很复杂，经过一些调试，我发现页面大小和开始记录只是作为Http Request值传递，命名为start和length。文本搜索以search[value] 传递排序顺序在名为order[0][column] 的成员中传递，排序方向在order[0][dir] 等中传递。

我用来排序和过滤的基本代码如下所示：

从 HTTP 请求对象中获取分页、排序和过滤值：

int startRec = 0;
int.TryParse(Request["start"], out startRec);
int pageSize = 10;
int.TryParse(Request["length"], out pageSize);
var search = Request["search[value]"];
var order = Request["order[0][column]"];
var direction = Request["order[0][dir]"];

var query = this._dataStore.Records.AsQueryable();

先应用（不区分大小写）搜索：

if (!string.IsNullOrWhiteSpace(search))

    query = query.Where(x => x.Label.ToLower().Contains(search.ToLower()));

然后应用任何排序：

switch (order)

    // My id column
    case "0":
        query = (direction == "desc") ? query.OrderByDescending(x => x.Id) : query.OrderBy(x => x.Id);
        break;
    // My label column
    case "1":
        query = (direction == "desc") ? query.OrderByDescending(x => x.Label) : query.OrderBy(x => x.Label);
        break;

最后应用分页：

query = query.Skip(startRec).Take(pageSize);

正确的记录现在可以返回了。

更新（使用“Datatables.net for MVC5”）

一旦我了解了服务器端数据表的基础知识，就该开始寻找现有的插件/实用程序来简化此代码了。到目前为止，我找到的最适合 MVC 5 的是 Datatables.net for MVC5 nuget 包。

安装 NuGet 包

将控制器Action更改为使用DataTablesBinder来提供IDataTablesRequest接口

例如

 public JsonResult Table([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestmodel)

首先应用任何搜索过滤器：

例如

if (!string.IsNullOrEmpty(requestmodel.Search.Value))

    query = query.Where(x => x.CompanyTypeName.Contains(requestmodel.Search.Value) || x.CompanyTypeDescription.Contains(requestmodel.Search.Value));

应用任意排序：

例如

foreach (var sort in requestmodel.Columns.GetSortedColumns())

    switch (sort.Name)
    
        case "CompanyTypeDescription":
            query = sort.SortDirection == Column.OrderDirection.Ascendant ? query.OrderBy(x => x.CompanyTypeDescription) : query.OrderByDescending(x => x.CompanyTypeDescription);
            break;
        case "CompanyTypeName":
        default:
            query = sort.SortDirection == Column.OrderDirection.Ascendant ? query.OrderBy(x => x.CompanyTypeName) : query.OrderByDescending(x => x.CompanyTypeName);
            break;
    

然后像以前一样使用Skip 和Take 应用分页：

例如

var result = query.Skip(requestmodel.Start).Take(requestmodel.Length).Select(x => new  x.CompanyTypeName, x.CompanyTypeDescription );

最后使用DataTablesResponse对象返回JSON结果：

例如

return Json(new DataTablesResponse(requestmodel.Draw, result, query.Count(), base.RefSureContext.CompanyType.Count()), JsonRequestBehavior.AllowGet);

这将所有搜索、排序和分页简化为一个易于重复的模式。

documentation for the addin is here。

【参考方案2】：

由于您使用的是 LINQ to SQL，所以分页非常简单：

var c = new MyDataContext("your string");

c.Employees.Skip(pageIndex * pageSize).Take(pageSize);

此代码将有效地在服务器上分页

我没有使用 DataTables jQuery 插件，但我假设你使用 AJAX 来获取数据（因为你没有使用 MVC），所以只需将当前页面索引作为参数发送，以及每页的行数 - 页面大小，仅此而已

要满足要求，您还需要在服务器上订购查询，因此您需要将订购条件发送到服务器并应用订单。

要基于string 在服务器上订购，请检查以下问题：

Dynamic LINQ OrderBy on IEnumerable<T>

【讨论】：

感谢您的回答，非常有用！ +1

jQuery dataTable 自动发送开始记录和页面大小，而不是页码。排序作为索引列名称/值的集合发送。这个答案对dataTable 的使用具有误导性，并且仅适用于实现简单的手动分页/排序的情况。

【参考方案3】：

晚会有点晚，但值得分享:)

Employees
    .OrderBy(sortColumn + " " + sortOrder)
    .Skip(pageNo * pageSize)
    .Take(pageSize)
    .ToList();

【讨论】：

jQuery dataTable 发送开始记录，而不是页码。排序顺序也以更复杂的方式发送。这个答案对于所提出的问题是不正确的，并且会误导那些找到它的人。