KendoUI Grid服务器分页

use*_*159 5 grid kendo-ui

我正在尝试使用JSON数据填充KendoUI网格,其中服务器返回总行数以及数据,但是我在使serverPaging正常工作时遇到了一些麻烦.我创建并分配网格的dataSource,如下所示:

                var oDS = new kendo.data.DataSource({
                    schema: {
                        data:  "data",
                        total: "total"
                    },
                    data: self.grdTableData,
                    serverPaging: true,
                    pageSise: 50,
                    total: joOutput["TotalRecords"]
                });

                grdTableResults.setDataSource(oDS);
Run Code Online (Sandbox Code Playgroud)

第一页显示了939条记录中的前50条,但只有1页(导航箭头从不响应任何东西),我看到NaN - 939项目的NaN和网格中心的点旋转圆圈消失了.

在我看过的所有示例中,有一点不同的是,我的$ .ajax调用和.done中JSON数据的处理不使用"transport:read"但我正在考虑如何发送数据并将其取回应该无关紧要(或者是因为每个页面请求都是新的服务器读取?).但我认为我没有做足够的事情来正确处理服务器分页,即使我似乎设置的数据源值类似于http://jsfiddle.net/ruse​​v/Lnkug/中的示例中设置的数据源值.然后是我不确定的"take"和"skip"值,但我确实有"startIndex"和"rowsPerPage",我发送到可以在那里使用的服务器.我假设网格可以告诉我我正在显示哪个页面我可以适当地设置我的"startIndex",如果我有一个"每页项目数"下拉,我可以重置我的"rowsPerPage"值吗?

无论如何,抱歉所有的新手问题.任何帮助和建议真的很感激.谢谢!

emp*_*emp 7

运输:阅读

即使您通过将值设置为函数来使用自定义逻辑,也应该能够使用"transport:read".我创建了一个JS Fiddle来演示这个功能.

dataSource: {
    serverPaging: true,
    schema: {
        data: "data",
        total: "total"
    },
    pageSize: 10,
    transport: {
        read: function(options) {
            var data = getData(options.data.page);
            options.success(data);
        }
    },
    update: function() {}
}
Run Code Online (Sandbox Code Playgroud)

您的read函数包含一个包含以下分页属性的参数:page,pageSize,skip,take.请记住,如果一个操作包含一个函数,则所有传输操作都需要是函数.

startIndex和rowsPerPage

如果您的服务器接受这些参数,您应该能够在read函数中提交它们.创建一个发布自定义数据的新ajax调用

var ajaxPostData = { startIndex: options.data.skip, rowsPerPage: options.data.pageSize }
Run Code Online (Sandbox Code Playgroud)

  • @Lijo:我发布了一个答案,希望它可能对其他人有帮助. (2认同)