如何在asp.net mvc中的客户端Kendo UI网格中实现服务器端分页

Can anyone tell me how can I implement server-side paging with client-side Kendo UI Grid?

有人能告诉我如何使用客户端Kendo UI网格实现服务器端分页吗?

2 个解决方案

#1

UPDATE: We have released an open source .NET library which makes paging, sorting an filtering a lot easier.

更新:我们已经发布了一个开源的。net库，它使得分页、排序过滤变得更加容易。

The grid will send the current pageSize and skip once you set serverPaging to true. On the server side you should page your data using the provided info and return it together with the total number of items. Here is a code snippet:

一旦将服务器分页设置为true，网格将发送当前的页面大小并跳过。在服务器端，您应该使用所提供的信息对数据进行分页，并将其与条目的总数一起返回。下面是一个代码片段:

Action

public ActionResult Products(int pageSize, int skip) 
{
     using (var northwind = new NorthwindDataContext())
     {
        var products = northwind.Products;
        // Get the total number of records - needed for paging
        var total = products.Count();

        // Page the data
        var data = products.Skip(skip).Take(pageSize).ToList();

        // Return as JSON - the Kendo Grid will use the response
        return Json(new { total = total, data = data });
     }
}

View

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: {
               url: "home/products",
               dataType: "json",
               type: "POST"
            }
        },
        schema: {
            data: "data", // records are returned in the "data" field of the response
            total: "total" // total number of records is in the "total" field of the response
        },
        serverPaging: true // enable server paging
    }
});

Reference

Paging with LINQ

• Take() and Skip()
• 带()和跳过()

DataSource configuration settings

• serverPaging
• serverPaging
• schema.data
• schema.data
• schema.total
• schema.total

#2

To implement server pagination, correct format should be return from server. For server side paging JSON format will be something like below JSON:-

要实现服务器分页，应该从服务器返回正确的格式。对于服务器端分页JSON格式将如下JSON:-

{ "mytotal":1069, "mydata": [{ ProductID : 1, ProductName : "Chai"}, { ProductID : 2, ProductName : "Chang" }]}

Tell to kendo grid pick total number of records from mytotal object and data rows from mydata in schema

告诉kendo grid从mytotal对象中选择记录总数，并从模式中的mydata中选择数据行

schema: {
    data: "mydata"
    total: "mytotal" // total is returned in the "total" field of the response
  }

Check detail example here

检查详细例子