Question

我正在尝试使用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);

并且第一页显示了939条记录中的前50条，但只有1页（导航箭头从不响应任何东西），我看到NaN - NaN的939项和旋转的圆点在中心网格永远不会消失。

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

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

Answer 1

传输：阅读

即使您通过将值设置为函数来获得自定义逻辑，也应该能够使用“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() {}
}

您的读取函数包含一个包含以下分页属性的参数：page，pageSize，skip，take。请记住，如果一个操作包含一个函数，则所有传输操作都需要是函数。

startIndex和rowsPerPage

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

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

Answer 2

这是服务器端包装器的代码，我用它来实现使用kendo网格的服务器分页：

@(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()
    };
}

此外，您应该使用如下所示的剑道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);
}

KendoUI Grid服务器分页

2 个答案: