剑道MVC网格分页按钮不改变显示结果

Question

我有一个剑道网格。分页号是可以的，每页的条目是可以的，但是当我按页码时，网格中的结果没有改变，所有结果都显示在第一页。请帮忙。

下面是我的代码:

<script>
    $(function() {
        $("#invoices-grid").kendoGrid({
            dataSource: {
                data: @Html.Raw(JsonConvert.SerializeObject(Model.Invoices)),
                schema: {
                    model: {
                        fields: {
                            JobNumber: { type: "string" },
                            CustomerName: { type: "string" },
                            DepartmentName: { type: "string" },
                            DateInvoice: { type: "string" },
                            ValidDays: { type: "number" },
                            Delivery: { type: "string" },
                            IsPayed: { type: "boolean" },
                            Payed: { type: "number" },
                            Status: { type: "boolean" },
                        }
                    }
                },
                @*type: "json",
                transport: {
                    read: {
                        url: "@Html.Raw(Url.Action("List", "Finances"))",
                        type: "POST",
                        dataType: "json",
                        data: additionalData1
                    },
                },
                schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors"
                },*@
                error: function(e) {
                    display_kendoui_grid_error(e);
                    // Cancel the changes
                    this.cancelChanges();
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
          
            columns: [
                {
                    field: "JobNumber",
                    title: "@T("gp.Invoice.Fields.JobNumber")",
                    template: '#= JobNumber #'
                },
                {
                    field: "CustomerName",
                    title: "@T("gp.Invoice.Fields.CustomerName")",
                    template: '#= CustomerName #'
                },
                {
                    field: "DepartmentName",
                    title: "@T("gp.Invoice.Fields.DepartmentName")",
                    template: '#= DepartmentName #'
                },
                {
                    field: "DateInvoice",
                    title: "@T("gp.Invoice.Fields.DateInvoice")",
                    template: '#= DateInvoice #'
                },
                {
                    field: "ValidDays",
                    title: "@T("gp.Invoice.Fields.ValidDays")",
                    template: '#= ValidDays #'
                },
                {
                    field: "Delivery",
                    title: "@T("gp.Invoice.Fields.Delivery")",
                    template: '#= Delivery #'
                },
                {
                    field: "Payed",
                    title: "@T("gp.Invoice.Fields.IsPayed")",
                    template: '#= (Payed == 2) ? "Комп." : ((Payed == 1) ? "ДЕ" : "НЕ") #'
                },
                {
                    field: "Id",
                    title: "@T("Common.Edit")",
                    width: 100,
                    template: '<a href="Edit/#=Id#">@T("Common.Edit")</a>'
                },
            ],
            pageable: {
                refresh: true,
                pageSizes: [5, 10, 20, 50]
            },
            editable: {
                confirmation: false,
                mode: "popup"
            },
            scrollable: false,
           
            selectable: true,
            change: function(e) {
                var selectedRows = this.select();
                var jobId = parseInt($(selectedRows).data('job-id'));
                var jobItemId = parseInt($(selectedRows).data('job-item-id'));
                var result = $.get("@Url.Action("SideDetails", "Production")/" + jobItemId);
                result.done(function(data) {
                    if (data) {
                        $(".job-edit .jobItemDetails").html(data);
                    }
                });
             
            },
           
            rowTemplate: kendo.template($("#invoiceRowTemplate").html()),
        });
    });
</script>

protected virtual void PrepareInvoiceFinanceListModel(FinanceListModel model,FormCollection form/*,string SearchJobItemNumber*/)
{
    var customers = model.SearchCustomerId;
    var isChecked = model.IsChecked;
    var searchString = model.SearchJobItemNumber;
    var IsChecked1 = model.IsChecked1;
    // searchString = model.SearchJobItemNumber;/* "001/2016";*/
    //var searchString = model.SearchJobItemNumber;
    //searchString = "091/2016";
    
    if (model == null)
        throw new ArgumentNullException("model");
    var finishedJobs = _jobService.GetJobsByHasInvoice(false);
    finishedJobs = finishedJobs.OrderByDescending(x =>
        {
            var firstOrDefault = x.JobItems.FirstOrDefault();
            return firstOrDefault?.DateCompletition ?? new DateTime();
        }).ToList();
    foreach (var job in finishedJobs)
    {
        var jobModel = job.ToModel();
        model.FinishedJobs.Add(jobModel);
    }
    var jobsBycustomers = finishedJobs.GroupBy(x => new { x.CustomerId, x.Customer.Name }).Select(x => new JobCustomersModel()
    {
        CustomerId = x.Key.CustomerId,
        CustomerName = x.Key.Name,
        JobsCount = x.Count(),
    });
    model.FinishedJobStatus = new JobStatusesModel()
    {
        Status = _localizationService.GetResource("gp.jobs.whitout.invoice"),
        Value = (int)JobStatusEnum.Finished,
        Count = finishedJobs.Count,
        CustomersJobs = jobsBycustomers.ToList()
    };
    var invoices = _invoiceService.GetAllInvoices(searchString, isChecked, IsChecked1, customers);
    foreach (var invoice in invoices)
    {
        var inv = invoice.ToModel();
        // var a = invoice.Payed;
        model.Invoices.Add(inv);
    }
    
    /////////////////////             ////////////////////////
    //var allCustomers = _invoiceService.GetAllCustomers(customers);
    //foreach (var customer in allCustomers)
    //{
    //    var cust = customer.ToModel();
    //    model.SearchCustomerId = customer.CustomerId;
    //    model.Invoices.Add(cust);
    //}
    var invoiceByCustomer = invoices
        .GroupBy(x => new { x.CustomerId, x.CustomerName })
        .Select(x => new JobCustomersModel()
        {
            CustomerId = x.Key.CustomerId,
            CustomerName = x.Key.CustomerName,
            JobsCount = x.Count(),
        });
    model.InvoiceStatus = new JobStatusesModel()
    {
        Status = _localizationService.GetResource("gp.jobs.with.invoice"),
        Value = (int)JobStatusEnum.Finished,
        Count = invoices.Count,
        CustomersJobs = invoiceByCustomer.ToList()
    };
    var latestOffers = _offerService.GetLatestOffers(0, 10);
    foreach (var offer in latestOffers)
    {
        var offerModel = offer.ToModel();
        model.LatestOffers.Add(offerModel);
    }
}

Answer 1

当前服务器操作是启用的…

serverPaging: true,
serverFiltering: true,
serverSorting: true

…但是transport的配置被注释掉了。这就是问题的原因。

如果要使用服务器操作，则配置dataSource transport。否则，使用本地数据绑定并禁用服务器操作，如下例所示:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
  </head>
  <body>
    <div id="invoices-grid"></div>
    <script>
      $(function() {
        var d = [];
        for (var i = 1; i <= 100; i++) {
          d.push({Id: i, CustomerName: "CustomerName " + i});
        }
        $("#invoices-grid").kendoGrid({
          dataSource: {
            data: d,
            schema: {
              model: {
                id: "Id",
                fields: {
                  CustomerName: { type: "string" }
                }
              }
            },
            error: function(e) {
              display_kendoui_grid_error(e);
              // Cancel the changes
              this.cancelChanges();
            },
            pageSize: 20,
            //serverPaging: true,
            //serverFiltering: true,
            //serverSorting: true
          },
          columns: [
            {
              field: "CustomerName",
              title: "gp.Invoice.Fields.CustomerName",
              template: '#= CustomerName #'
            },
            {
              field: "Id",
              title: "Common.Edit",
              width: 100,
              template: '<a href="Edit/#=Id#">Common.Edit</a>'
            },
          ],
          pageable: {
            refresh: true,
            pageSizes: [5, 10, 20, 50]
          },
          editable: {
            confirmation: false,
            mode: "popup"
          },
          scrollable: false,
          selectable: true,
          change: function(e) {
          }
        });
      });
    </script>
  </body>
</html>