Kendo UI Grid 上的分页不起作用

Posted

技术标签:

【中文标题】Kendo UI Grid 上的分页不起作用【英文标题】:Pagination on Kendo UI Grid is not working 【发布时间】:2013-01-27 03:15:47 【问题描述】:

我正在显示一个带有远程数据的网格,如果我不添加分页,则会显示完整的数据集,当然这是不希望的。

以下是我用来在网格上显示数据的代码:

var ds = new kendo.data.DataSource(
    transport: 
        read: 
            url: "http://127.0.0.1:81/SismosService.svc/usuario/index",
            dataType: "json"
        
    ,
    schema: 
        data: "Response"
    ,
    pageSize: 5
);
$("#usuariosGrid").kendoGrid(
    pageable: 
        refresh: true
    ,
    columns: [
         field: "UsuarioId", title: "ID", width: "100px" ,
         field: "Nombre", title: "Nombre", width: "100px" ,
         field: "ApellidoP", title: "Apellido Paterno", width: "100px" ,
         field: "ApellidoM", title: "Apellido Materno", width: "100px" ,
         command: [ text: "Editar", click: editFunction ,  text: "Eliminar", click: deleteFunction ], title: " ", width: "200px" 
    ],
    dataSource: ds
);

这会呈现一个包含 5 个项目的网格,但仅此而已,我无法浏览其余条目。要显示的页面和项目数被标记为零,从而禁用导航控件。

我的配置中是否缺少某些东西?感谢您提供的任何帮助。

【问题讨论】:

【参考方案1】:

在服务器中完成分页时(检查serverpaging),您需要返回记录总数。有关信息,请参阅total

【讨论】:

我将代码更改为类似于this,页数正确且导航按钮正常工作,但它始终显示同一页面中的所有条目。我还缺少其他东西吗? 在执行serverPaging 时,服务器负责分页,因此它应该只发送pageSize 记录。您的服务器是否仅返回 pageSize 中指定的记录数? 我想我误解了一些东西,我认为 pageSize 是指在网格中呈现的每页的条目数量。我认为如果服务器返回 20 个条目并且数据源中定义的 pageSize 为 5,那么我将在网格中呈现 4 个页面,每个页面有 5 个条目。但从你告诉我的情况来看,我猜 pageSize 是一个发送到服务器以返回 2 页条目的参数?如果是这种情况,我的服务器没有接收此类参数的端点。如果我的服务器返回 n 个条目,我如何在 m 个页面中呈现这些条目? 如果您希望每页显示 5 个条目的组但从服务器接收所有数据,那么您应该将 serverPaging 指定为 false。 好的,所以我必须指定 pageSize、总数并将 serverPaging 设置为 false。现在它起作用了。谢谢。【参考方案2】:

我遇到了同样的问题,因为我误解了 serverPaging。如果将 serverPaging 设置为 true,则还必须修改服务器返回的内容。

以前,我让服务器返回所有数据。为了解决这个问题,我使用ToDataSourceResult 来修改我的服务器返回的内容。

见: How to implement Server side paging in Client side Kendo UI grid in asp.net mvc

【讨论】:

【参考方案3】:

在这个小问题上花一天时间,你所要做的就是返回记录总数,如果你的服务没有返回记录总数,请执行以下操作

schema: 
        data: "Response"
    ,

total: function(response)
      
        return response."your method name".length;
      

【讨论】:

以上是关于Kendo UI Grid 上的分页不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Spring Boot 版本 2.0.3.RELEASE 中的分页不起作用

在Codeigniter中搜索的分页不起作用

使用 Ajax 调用的 Extjs Grid 分页不起作用

ngx-分页单击下一页不起作用

CodeIgniter 3分页不起作用

Android房间分页不起作用