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

时间:2012-10-17 06:55:21

标签: asp.net-mvc kendo-ui

有谁能告诉我如何使用客户端Kendo UI Grid实现服务器端分页?

3 个答案:

答案 0 :(得分:58)

  

更新:我们有released一个开源.NET库,可以进行分页,更轻松地对过滤进行排序。

pageSize设置为skip后,网格将发送当前serverPagingtrue。在服务器端,您应使用提供的信息对数据进行分页,并将其与项目总数一起返回。这是一段代码:

动作

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 });
     }
}

视图

$("#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
    }
});

参考

使用LINQ

进行分页

DataSource配置设置

答案 1 :(得分:0)

要实现服务器分页,应从服务器返回正确的格式。对于服务器端分页,JSON格式将类似于JSON: -

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

告诉kendo网格选择来自mytotal对象的记录总数和来自模式中mydata的数据行

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

检查详细示例JSR223 Test Elements and Groovy language

答案 2 :(得分:0)

接受的答案没有UI解决方案;仅提供jQuery答案。如果它对其他人有帮助,以下是适用于UI中的Kendo网格的解决方案:

控制器的代码段

        DataSourceResult result = new DataSourceResult()
        {
            Data = dataSet,
            Total = recordCount
        };

        return Json(result, JsonRequestBehavior.AllowGet);

View的代码段

        .DataSource(dataSource => dataSource                
            .Ajax()
            .Read(read => read.Action("*<our method>*", "*<our controller>*")
        )