jquery - 用于 jQuery 分页的 Kendo UI 不起作用 - “没有要显示的项目”

Question

我使用 Kendo UI 网格并将 json 格式的数据传递给它。“总计”字段为 1157，页面大小为 10。我想控制服务器端分页，但在 Kendo 网格的底部显示“没有要显示的项目”消息。这是我的 index.cshtml：

<div dir="rtl"><div id="grid" class="k-rtl"></div></div>
    <script at="Foot">
        $(document).ready(function(){
            $("#grid").kendoGrid({
                columns: [{
                        field: "Fullname",
                        title: "name"
                    }],
                dataSource: {
                    transport: {
                        type: "json",
                        read: "/pms/Persons/Persons_Read",
                        data: {
                            format: "json"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: "Total"},
                    serverPaging: true,
                    pageSize: 10
                },
                pageable: true
            });
        });
    </script>

这是服务器端 Persons 控制器操作：

[AcceptVerbs("Get")]
        public ActionResult Persons_Read([DataSourceRequest]DataSourceRequest request)
        {
            return Json(Getpersons().ToDataSourceResult(request));
        }

网格仅显示 10 条第一条记录，之后有 0 页。

标签： jqueryasp.net-corekendo-uiasp.net-core-mvckendo-grid

Answer 1

我做了一个几乎和你一样的测试演示，它在我这边运行良好。我做了以下修改

1.列首字母field应为小写“fullName”

    columns: [{
        field: "fullName",
        title: "name"
    }],

2.数据和总数也要小写

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

下面是代码：

模型：

public class Person
{
    public string FullName { get; set; }
}

看法：

<div dir="rtl"><div id="grid" class="k-rtl"></div></div>

@section scripts{

    <script at="Foot">
        $(document).ready(function () {
            $("#grid").kendoGrid({
                columns: [{
                    field: "fullName",
                    title: "name"
                }],
                dataSource: {
                    transport: {
                        type: "json",
                        read: "/Person/Persons_Read",
                        data: {
                            format: "json"
                        }
                    },
                    schema: {
                        data: "data",
                        total: "total"
                    },
                    serverPaging: true,
                    pageSize: 10
                },
                pageable: true,
            });
        });
    </script>
}

控制器：

public class PersonController : Controller
{
    [AcceptVerbs("Get")]
    public ActionResult Persons_Read([DataSourceRequest] DataSourceRequest request)
    {
        return Json(Getpersons().ToDataSourceResult(request));
    }

    private List<Person> Getpersons()
    {
        var people = new List<Person>();
        for (int i = 0; i < 1157; i++)
        {
            var person = new Person()
            {
                FullName = "Person"+i
            };
            people.Add(person);
        }
        return people;
    }
}

结果：