Kendo UI - 网格分页(服务器端)

Question

我正在尝试使用Kendo-UI网格和分页.一切似乎都可以用于Total属性,虽然我将它设置为100但它显示了10个项目中的1到10个页面大小我正在设置.谁有这个更好的成功？我搜索了剑道文档和论坛没有成功.

@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
    foreach (System.Data.DataColumn column in Model.Columns)
    {
        columns.Bound(column.ColumnName);
    }
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(10)
    .Total(100)
    .Model(model =>
        {
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                model.Field(column.ColumnName, column.DataType);
            }                
        })
    .Read(read => read.Action("Read", "Controls"))
)

)

谢谢

Answer 1

如文档中所述,当启用serverPaging时,您需要在架构中指定total,并且每次从服务器返回响应时,您还需要返回该总计.

 dataSource: {
    serverPaging: true,
    schema: {
        data: "data",
        total: "total"
    },
  //...

这里讨论的是相同的.

请检查以下示例.

Answer 2

是的,您需要在响应中传递Total字段.

您的观点可能如下:

@(Html.Kendo().Grid<YourViewModel>()
      .Name("grid")
      .DataSource(dataSource => dataSource          
          .Ajax()
          .PageSize(20)
          .ServerOperation(true)
          .Read(read => read.Action("Data_Read", "YourController", new {Id=Model.CurrentId}))
       )
      .Columns(c =>
      {
          c.Bound(x => x.Name);
          c.Bound(x => x.CreatedTime);
      })
      .Pageable()
      .Sortable()
)

您的操作代码如下:

    public ActionResult Data_Read([DataSourceRequest]DataSourceRequest request, int Id)
        {
            int total = yourQuery.GetTotal(Id); 

            var returnViewModel = yourQuery.GetViewModels(Id, request.Page, request.PageSize);


            return Json(new
            {
                Data = returnViewModel,
                Total=total
            });
        }

在Fiddler中查看请求和响应,您将看到魔术是如何发生的:请求:sort = SessionId-asc&page = 7&pageSize = 20&group =&filter =

这是网格传递给控制器​​的DataSourceRequest格式; 它已经包含了分页所需的参数.

查看操作的响应,您将看到有一个包含所有记录的数据字段.总计字段是Kendo网格分页所需的所有记录的总数.