Kendo UI - 网格分页（服务器端）

Posted 2023-05-07

技术标签:

【中文标题】Kendo UI - 网格分页（服务器端）【英文标题】：Kendo UI - Grid pagination (server side) 【发布时间】：2013-03-06 20:58:39 【问题描述】：

我正在尝试将 Kendo-UI 网格与分页一起使用。 Total 属性似乎一切正常，尽管我将其设置为 100，但它显示了我正在设置的页面大小的 10 个项目中的 1-10 个。有人在这方面取得了更好的成功吗？我搜索了 Kendo 文档和论坛，但没有成功。

@(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"))
)

)

谢谢

【问题讨论】：

如果删除“.Total”属性会发生什么？如果您使用 ASP.Net MVC Wrapper 解决了问题，能否请您发布解决方案？ 【参考方案1】：

As explained in the documentation 启用 serverPaging 时，您需要在架构中指定总计，并且每次您从服务器返回响应时，您还需要在架构指定的这个位置返回该总计。

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

同样的讨论here。

检查以下example。

【讨论】：

谢谢，从我的代码中可以看出，我正在使用 Kendo Wrapper，因为我的模型是 DataTable。我宁愿继续使用它。我找不到适用于 MVC 包装器的示例。你的控制器动作是什么样的 - read.Action("Read", "Controls")) ？这不是我想要的，但我对我的代码进行了一些更改并让它与这种方法一起工作，谢谢 @PeturSubev 我遇到了同样的问题，比如分页和排序......这里我们使用 SP 从数据库中获取结果，我们已经在 SP 内部实现了分页和排序现在我需要传递页面数字和页面大小以及使用 kendo UI 网格 MVC 包装器将列名排序到 SP，我如何将页面大小和页码发送到 SP...【参考方案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格式；它已经包含了分页所需的参数。

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

【讨论】：

【参考方案3】：

根据原始示例，“Total”将被自动识别，如果您想每页显示100个结果，请将其设置在“PageSize”中。

【讨论】：

我想每页显示 10 个项目，假设我总共有 100 个项目从原始示例中，没有说明“总计”，尝试删除它，您将获得：1 - 10 个项目，共 100 个项目如果我将退回所有 100 件物品，那将起作用，但我不想这样做。我想要服务器端分页而不是客户端。【参考方案4】：

如果您为 ASP.NET MVC 使用 Kendo 包装器，请考虑添加：