Question

我想用角度js中的脚本在kendo grid ui中实现服务器端分页，排序和过滤，但问题是分页不起作用。

前10条记录正在显示，但是当我点击第2页时，服务器端呼叫不会进行，也不会显示任何记录。

来源：http://demos.telerik.com/kendo-ui/grid/angular

这是我的观点：

 <link href="~/css/kendo.common-material.min.css" rel="stylesheet" />
    <link href="~/css/kendo.rtl.min.css" rel="stylesheet" />
    <link href="~/css/kendo.material.min.css" rel="stylesheet" />
    <div class="table-responsive" ng-controller="GridDemoCtrl">
                <kendo-grid options="mainGridOptions">
                </kendo-grid>
            </div>
   <!-- jQuery -->
    <script src="~/vendor/jquery/jquery.min.js"></script>

    <!-- Angular -->
    <script src="~/vendor/angular/angular.js"></script>
 <script src="~/js/kendo.all.min.js.js"></script>

我的剧本：

app.controller('GridDemoCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.mainGridOptions = {
        dataSource: {
            transport: {
                read: {
                    url: "../Holiday/GetListofHolidays",
                    contentType: "application/json",
                    type: "POST"
                }
            },
            schema: {
                data: "Data",
                total: "Total",
            },
            pageSize: 10,
            serverPaging: true
        },
        pageable: true,
        columns: [
         {
             field: "HolidayName",
             title: "Holiday Name"
         },
         {
             field: "HolidayDiscription",
             title: "Holiday Description"
         }
        ]
    };
}]);

我的控制器：

[HttpPost]
        public ActionResult GetListofHolidays(DataSourceRequest command)
        {
           var holidayList = _holidayService.GetAllHolidays(command.Page - 1, command.PageSize,null);
           var gridModel = new DataSourceResult
           {
               Data = holidayList.Select(x =>
               {
                   var holidayModel = new HolidayModel();
                   holidayModel.HolidayName = x.HolidayDiscription;
                   holidayModel.HolidayDate = x.HolidayDate;
                   holidayModel.HolidayDiscription = x.HolidayDiscription;
                   return holidayModel;
               }),
               Total = holidayList.TotalCount,
           };
           return Json(gridModel);
        }

public  class DataSourceRequest
    {
        public int Page { get; set; }

        public int PageSize { get; set; }

        public DataSourceRequest()
        {
            this.Page = 1;
            this.PageSize = 10;
        }
    }

public class DataSourceResult
    {
        public object ExtraData { get; set; }

        public IEnumerable Data { get; set; }

        public object Errors { get; set; }

        public int Total { get; set; }
    }

所以请任何人可以指导我我的代码问题以及为什么分页不起作用???

Answer 1

您需要让Kendo处理分页等。确保查询中的LINQ（您使用的是ORM，如Entity Framework吗？）还没有执行查询并让GetAllHolidays()返回IQueryable。 holidayList.ToDataSourceResult()将添加分页，排序和过滤并执行查询。

试试这个：

[HttpPost]
public ActionResult GetListofHolidays([DataSourceRequest]DataSourceRequest request)
{
    IQueryable<HolidayModel> holidayList = _holidayService.GetAllHolidays();
    return Json(holidayList.ToDataSourceResult(request));
}

在角度js中，我的kendo ui网格中的分页不起作用

1 个答案: