KendoUI Grid 服务器分页

Posted

技术标签:

【中文标题】KendoUI Grid 服务器分页【英文标题】:KendoUI Grid serverpaging 【发布时间】:2013-03-15 13:58:21 【问题描述】:

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

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

                grdTableResults.setDataSource(oDS);

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

在我看过的所有示例中,有一点不同的是我的 $.ajax 调用和 .done 中 JSON 数据的处理不使用“传输:读取”,但我在想如何我发送数据并将其取回无关紧要(还是因为每个页面请求都是新的服务器读取?)。但我认为我在正确处理服务器分页方面做得还不够,即使我设置的数据源值似乎与http://jsfiddle.net/rusev/Lnkug/ 示例中设置的值相似。然后是我不确定的“take”和“skip”值,但我确实有“startIndex”和“rowsPerPage”发送到可以在那里使用的服务器。我假设网格可以告诉我正在显示的页面我可以适当地设置我的“startIndex”,如果我有一个每页项目”下拉菜单,我可以重置我的“rowsPerPage”值?

无论如何,对于所有新手问题,我们深表歉意。任何帮助和建议都非常感谢。谢谢!

【问题讨论】:

有几个问题我不明白:你提到了服务器分页,但在我看来,你的数据实际上来自一个名为 self.grdTableDatajavascript 数组,如果是这样,那么这样说是没有意义的serverPaging,这是用于远程服务器的。 你写pageSisepageSize有错字,代码里也有吗? 为什么要定义schema?记住实际定义,您似乎不需要它。 虽然客户端和服务器现在出于测试目的是同一台机器,但最终服务器将是远程的。也许我不明白 serverPaging 是否真的有必要——无论数据来自哪里,它仍然是一个 JavaScript 数组。我想我只需要一种机制来读取数据块,这样我就可以更有效地读取和分页数据数据,而不是拥有数千行数据。 这确实是一个错字,它摆脱了旋转的圆圈,现在我看到了多个页码和 939 个项目中的 1 - 50 个而不是 NaN - 939 个项目的 NaN,但仍然没有点击响应在任何数字或箭头上。感谢您缓存它。 【参考方案1】:

运输:阅读

即使您通过将值设置为函数来自定义逻辑,您也应该能够使用“传输:读取”。我创建了一个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() 

您的读取函数包含一个参数,该参数包含以下分页属性:page、pageSize、skip、take。请记住,如果一个操作包含函数,则所有传输操作都必须是函数。

startIndex 和 rowsPerPage

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

var ajaxPostData =  startIndex: options.data.skip, rowsPerPage: options.data.pageSize 

【讨论】:

这对我有用,但我想用服务器端包装器(asp.net mvc)来做,你知道是否可能吗? @Ashkan 如果您有解决方案,您能否分享一下 ASP.Net 包装器方法? @Lijo:我作为答案发布,希望对其他人有所帮助。 @emp 非常感谢。您知道takeskipkeeppagepageSize 参数是否记录在任何地方? 不,恐怕他们没有记录在案(他们不在这里:docs.telerik.com/kendo-ui/api/web/grid)。您只需要使用 Fiddler 或任何其他网络检查器来查看请求。参数是不言自明的......【参考方案2】:

这是服务器端包装器的代码,我用于通过剑道网格实现服务器分页:

@(html.Kendo().Grid<IJRayka.Core.Utility.ViewModels.ProductDto>()
.Name("productList")
.Columns(columns =>

    columns.Bound(prod => prod.Name);
    columns.Bound(ord => ord.Brand);
    columns.Bound(ord => ord.UnitPackageOption);
    columns.Bound(ord => ord.CategoryName);
    columns.Bound(ord => ord.Description);
)
.Pageable(pager => pager.PageSizes(true))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.PrefixUrlParameters(false)
.DataSource(ds => ds.Ajax()
            .Model(m => m.Id(ord => ord.ID))
            .PageSize(5)
            .Read(read => read
                .Action("FilterProductsJson", "ProductManagement")
                .Data("getFilters"))
            )
)

getFilters 是一个 javascript 函数,当它想从 url/service 获取数据时,它会将我的自定义过滤器参数传递给网格:

function getFilters() 
    return 
        brand: $("#Brand").val(),
        name: $("#Name").val(),
        category: $("#CategoryName").val()
    ;

此外,您应该使用 kendo 的 DataSourceRequest 类来实现控制器的操作方法,如下所示,否则它将无法按您想要的方式工作:

public JsonResult FilterProductsJson([DataSourceRequest()] DataSourceRequest request,
                                // three additional paramerters for my custom filtering
                                string brand, string name, string category)

    int top = request.PageSize;
    int skip = (request.Page - 1) * top;
    if(brand != null)
        brand = brand.Trim();
    if(name != null)
        name = name.Trim();
    if(category != null)
        category = category.Trim();

    var searchResult = new ManageProductBiz().GetPagedFilteredProducts(brand, name, category, top, skip);
    // remove cyclic references:
    searchResult.Items.ForEach(prd => prd.Category.Products = null);

    return Json(new DataSourceResult  Data = searchResult.Items, Total = searchResult.TotalCount , JsonRequestBehavior.AllowGet);

【讨论】:

谢谢。你知道为什么这里的页码不正确***.com/questions/18064144/…吗?

以上是关于KendoUI Grid 服务器分页的主要内容,如果未能解决你的问题,请参考以下文章

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

KendoUI:Grid控件的使用

我的KendoUI中没有显示JQuery Grid的图标

kendoui:grid - 在网格的顶部和底部设置寻呼机

在 kendo ui 网格中以编程方式更改 serverSorting

KendoUI:点击按钮后将网格数据重置为第一页