在对列进行排序之前，Kendo 网格最初不会分页答案

【问题标题】：Kendo grid is not paging intitially until column is sorted在对列进行排序之前，Kendo 网格最初不会分页
【发布时间】：2013-01-07 20:11:58
【问题描述】：

再次分页不起作用，直到我单击列标题进行排序，然后分页似乎工作正常。

<script type="text/javascript">
$(document).ready(function () {

    $('#reportContainer').load('Reports/Scaffold.html', function () {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    type: "POST",
                    url: Reports.ServiceURL.MyService,
                    dataType: "JSON",
                    contentType: "application/json",
                    data: { myParam: "1" },
                    serverPaging: true,
                    serverSorting: true
                },

                parameterMap: function (data, operation) {
                    return kendo.stringify(data);
                }
            },

            batch: true,
            pageSize: 50,
            schema: {
                data: "d"
            }
        });

        $("#allGrids").kendoGrid({
            dataSource: dataSource,
            sortable: true,
            pageable: true,
            filterable: false,
            height: 400,
            columns: myModel
        });
    });
});
</script>

【问题讨论】：

能否在 JSFiddle 或 JSBin 中重现，以便我们帮助解决问题？

标签： jquery asp.net kendo-ui

【解决方案1】：

似乎你想选择serverPaging 但是你把它放在了错误的地方。它是DataSource 的字段，而不是transport.read 的字段。您应该将其定义为：

var dataSource = new kendo.data.DataSource({
    transport    : {
        read        : {
            type       : "POST",
            url        : Reports.ServiceURL.MyService,
            dataType   : "JSON",
            contentType: "application/json",
            data       : { myParam: "1" }
        },
        parameterMap: function (data, operation) {
            return kendo.stringify(data);
        }
    },
    serverPaging : true,
    serverSorting: true,
    batch        : true,
    pageSize     : 50,
    schema       : {
        data: "d"
    }
});

注意：不要忘记，当您定义 schema.data 时，您还需要定义记录总数，如果它来自服务器，您可能会有类似的内容：

schema       : {
    data: "d",
    total: "total"
}

并且服务器应该返回一些如下所示的 JSON：

{
    "d": [
        ...
    ],
    "total": 100
}

其中100 是服务器中的总数或记录数，而不是d 中的记录数。

如果是不是 serverPaging 你可能会这样做：

schema   : {
    data: "d",
    total: function(data) { return data.d.length; }
}

@BurkeHolland，如果您想知道发生了什么，网格实际上没有执行serverPaging 并且可能没有接收到total 或无法计算它。它既不是serverPaging 模式也不是serverSorting 模式，所以当@SkildLobster 点击标题时，它对结果进行排序（可能它们已经排序），然后它根据网格数据长度计算记录总数终于可以计算页面了。

【讨论】：

这非常有效。当我错过这样的小事时，我讨厌它。另外，我使用了最后一个示例：
我在 KendoUI DataSource 上已经完成并看到了很多小错误，因此我计划开发一个引导式 UI 来定义/配置它。你并不孤单！

【解决方案2】：

在 MVC Kendo 网格的情况下，我看不到添加模式的明显方法。我通过在加载后对网格进行排序来解决问题，如下所示。在网格中，我添加了一个数据绑定事件：

@(Html.Kendo().Grid<tpnconnect.com.Models.Tools.NonWorkingDay>()
            .Name("Holiday_Grid")
            .Events(e => e
                .DataBound("sortHolidayGridByDate")
            )

我使用了一个 JavaScript 变量来防止事件被多次触发：

<script>
    var firstBind = true;

    function sortHolidayGridByDate() {
        if (firstBind == true) {
            firstBind = false;
            var grid = $("#Holiday_Grid").data("kendoGrid");
            var dsSort = [];
            dsSort.push({ field: "NonWorkingDate", dir: "desc" });
            grid.dataSource.sort(dsSort);
        }
    }
</script>

【讨论】：