Kendo Grid 页脚未在页面加载时初始化答案

【问题标题】：Kendo Grid footer not initializing on page loadKendo Grid 页脚未在页面加载时初始化
【发布时间】：2013-11-01 17:47:03
【问题描述】：

我正在使用 Kendo UI Grid 来显示从 WCF 服务消耗的结果。我使用的剑道版本是 .web.2013.2.716.open-source。我有一个问题，当页面加载时，页脚尚未初始化。它显示 0 页，没有要显示的项目。正在填充网格并且确实包含有效行。如果我在网格上执行任何类型的操作，例如排序或更改每页显示的行数，则页脚将包含有效信息。这是 JavaScript 代码的副本：

<script>
    $(document).ready(function () {
        $("#customerGrid").kendoGrid({
            autoBind:true,
            dataSource: {
                change: function (results) {
                    console.log("Successful");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(textStatus)
                },
                transport: {
                    read: "/Services/SalesCRM_DBServices.svc/getCustomers",
                    dataType: "json"
                },
                schema: {
                    data: function (response) {
                        return response.d;
                    },
                    total:"total",
                    model: {
                        fields: {
                            AccountNumber: { type: "string" },
                            Name: { type: "string" },
                            ContactName: { type: "string" }
                        }
                    }
                },
            },
            height:325,
            filterable: true,
            sortable: true,
            serverPaging:true,
            pageable: {
                refresh: false,
                info: true,
                input: true,
                numeric: true,
                pageSize:5,
                pageSizes: true,
                previousNext: true
            },
            columns: [{
                field: "AccountNumber",
                title: "Account Number",
                width: "125px",
                filterable: false
            },
            {
                field: "Name",
                title: "Name",
                width: "200px",
                filterable: false
            },
            {
                field: "ContactName",
                title: "Contact Name",
                width: "200px",
                filterable: false
            },
            {
                command: [{ text: "SELECT" }],
                width: "50px"
            },
            ],
        });

    });
</script>

另外，这里是用于网格的元素的标签：

<div id="customerGrid"></div>

再次，网格正在填充，页脚显示在网格底部，但有 0 页，页脚指示“没有要显示的项目”。但是，当我对网格进行排序或更改要显示的行数时，页脚会显示 2 页和“1 - 5 of 9 items”。

任何人都可以提供有关此问题的任何帮助，我们将不胜感激。

我查看了标题为“Grid paging not working on page load”的帖子。在 Kendo UI 高级论坛上，并没有真正的帮助。

【问题讨论】：

标签： jquery grid kendo-ui

【解决方案1】：

您很可能没有在响应中返回 "total"。

由于您在 model 定义中定义了一个名为 total 的字段，其中包含 total 您有来定义它。

产生您所说内容的服务器的无效响应示例：

{
    "d"    : [
        { "AccountNumber": 1, "Name": "John", "ContactName": "Jack" },
        { "AccountNumber": 2, "Name": "Jane", "ContactName": "Jack" },
        { "AccountNumber": 3, "Name": "Joe", "ContactName": "Jack" }
    ]
}

虽然这是一个有效的回应：

{
    "total": 3,
    "d"    : [
        { "AccountNumber": 1, "Name": "John", "ContactName": "Jack" },
        { "AccountNumber": 2, "Name": "Jane", "ContactName": "Jack" },
        { "AccountNumber": 3, "Name": "Joe", "ContactName": "Jack" }
    ]
}

如果您实际上不愿意发送总数，请将Model 定义为：

schema   : {
    data : function (response) {
        return response.d;
    },
    total: function (response) {
        return response.d.length;
    },
    model: {
        fields: {
            AccountNumber: { type: "string" },
            Name         : { type: "string" },
            ContactName  : { type: "string" }
        }
    }
}

或者更复杂但更简单：

schema   : {
    data : "d",
    total: "d.length",
    model: {
        fields: {
            AccountNumber: { type: "string" },
            Name         : { type: "string" },
            ContactName  : { type: "string" }
        }
    }
}

【讨论】：