KendoUI网格服务器分页

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页(导航箭头从不响应任何内容)，我看到了939条的NaN - NaN和网格中心的旋转圆点，永远不会消失。

在我看过的所有示例中有一件事是不同的，那就是$。ajax调用和。done中JSON数据的处理不使用"transport: read"，但我在想我如何发送数据并获得它不应该重要(或者是因为每个页面请求都是一个新的服务器读取?)。但我不认为我做得足以正确处理服务器分页，即使它似乎我正在设置数据源值类似于在http://jsfiddle.net/rusev/Lnkug/的例子中设置。然后是"take"one_answers"skip"值，我不确定，但我确实有"startIndex"one_answers"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() {}
}

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

startIndex和rowsPerPage

如果您的服务器接受这些参数，您应该能够在read函数中提交它们。创建一个新的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);
}