无法使用 Kendo UI 和 Web API 进行分页答案

【问题标题】：Cannot Paginate using Kendo UI and Web API无法使用 Kendo UI 和 Web API 进行分页
【发布时间】：2016-09-01 15:25:17
【问题描述】：

我是 KendoUI 的新手，所以这似乎是一个菜鸟问题。

我正在尝试使用 KendoUI 和 Web API 实现服务器端分页。

这是我生成剑道网格的脚本

$(function () {
 $("#grid").kendoGrid({
    height: 400,
    columns: [
        "FirstName",
        "LastName",
        { field: "Mobile", width: "150px" },
        { field: "Email", width: "150px" },
        { field: "LoginVerified", width: "150px" },
        { field: "DivisionName", width: "100px" }
    ],
    pageable: true,
    sortable: true,
    filterable: true,
    dataSource: {
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: 10,
        transport: {
            read: "/api/Users/GetStaffsPaged"
        }
    }
 });
});

这是我的 Web API 函数

    [HttpGet]
    [ActionName("GetStaffsPaged")]
    public IEnumerable<StaffsBasicInfo> GetStaffsPaged()
    {
        var take = string.IsNullOrEmpty(HttpContext.Current.Request.QueryString["take"]) ? 1000 : Convert.ToInt32(HttpContext.Current.Request.QueryString["take"]);
        var skip = string.IsNullOrEmpty(HttpContext.Current.Request.QueryString["skip"]) ? 1000 : Convert.ToInt32(HttpContext.Current.Request.QueryString["skip"]);

        StaffsBasicInfoBL staffsBL = new StaffsBasicInfoBL();

        List<StaffsBasicInfo> staffs = staffsBL.getAllStaffsBasicInfo();

        staffs = staffs.Skip(skip).Take(take).ToList();

        return staffs;
    }

当我运行我的代码时，网格总是显示前 10 条记录，但我的数据库有 2000 多条记录。

我尝试了很多教程来解决这个问题，但我无法进行分页。

http://www.telerik.com/blogs/the-facts-on-using-kendo-ui-with-asp-net-webapi

根据上面的教程，我的代码应该可以工作了。

我也试过这个教程，但我的 Visual Studio 无法解析 DataSource 类。

http://blog.falafel.com/server-paging-sorting-filtering-kendo-datasourcerequest/

请帮我实现分页

【问题讨论】：

标签： asp.net asp.net-web-api kendo-ui pagination

【解决方案1】：

您没有返回存在的“总”项目数，以便 Kendo 可以在分页区域中生成项目的总数/大小。

尝试返回

var totalCount = staffs.Count();
staffs = staffs.Skip(skip).Take(take).ToList();

return new { data = staffs, total = totalCount};

在 JavaScript 中，定义模式（为简洁起见，代码已删除）：

$("#grid").kendoGrid({
    // code removed for brevity 
    dataSource: {
        transport: {
            read: {
               url: "/api/Users/GetStaffsPaged"
            }
        },
        schema: {
            data: "data",
            total: "total"
        }

    }
});

因此，这里的方法是从数据库中提取所有数据并在服务器端进行分页，这违背了进行服务器端分页的实际目的。分页应该发生在数据库中，而不是服务器端。

【讨论】：