Kendo UI Grid 上的分页不起作用答案

【问题标题】：Pagination on Kendo UI Grid is not workingKendo UI Grid 上的分页不起作用
【发布时间】：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 个项目的网格，但仅此而已，我无法浏览其余条目。要显示的页面和项目数被标记为零，从而禁用导航控件。

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

【问题讨论】：

标签： javascript kendo-ui kendo-grid

【解决方案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;
      }

【讨论】：