kendo ui grid 完成服务器端分页和设置总数

Posted 2023-05-07

【中文标题】kendo ui grid 完成服务器端分页和设置总数

【英文标题】：kendo ui grid complete server side paging and setting total count

【发布时间】：2017-05-10 18:41:05

【问题描述】：

我正在使用带有服务器端分页的剑道网格。我在数据库端本身对数据进行排序和获取，这只给了我页面大小的记录数。我还从后端本身获得总记录数。我只想将此数据绑定到剑道网格，并根据我返回的计数显示页码。

即对于每个下一页请求，我只返回 pagesize（例如 15）记录总数和记录总数。下面是我的剑道网格代码。请帮我绑定这条记录，并根据总数显示页码。

@(html.Kendo().Grid(Model.InvoiceList)
.Name("InvoiceGrid")
.Columns(columns =>

columns.Bound(p => p.CompanyName).Title("Company Name").Width(80);
columns.Bound(p => p.Account).Title("Account").Width(60);
columns.Bound(p => p.MerchantNumber).Title("Merchant No.").Width(60);
columns.Bound(p => p.InvoiceAmount).Title("Invoice Amount").Width(60);
columns.Bound(p => p.ReferralPercentage).Title("Referral %").Width(60);
columns.Bound(p => p.ReferralCommission).Title("Referral Com.").Width(60);
columns.Bound(p => p.DeveloperPercentage).Title("Developer %").Width(60);
columns.Bound(p => p.DeveloperCommission).Title("Developer Com.").Width(60);
)
.Pageable(
 )
.Sortable()
.Filterable(filterable => filterable
    .Extra(false)
    )
.DataSource(dataSource => dataSource
 .Ajax()
    .Batch(false)
    .PageSize(15)
      .ServerOperation(true)
      .Read(read => read.Action("Index", "Invoice")
      ).Total(Model.count)
 )
 )

我用来获取记录的服务器端代码如下。

public async Task<ActionResult> IndexAsync(int pageNo=0,int numberOfRecord=15)
    

        //InvoicePaging has invoice list of 15 records and count = 400
        InvoicePaging ip = await InvoiceDAL<FileRecord>.getAllInvoices("SProcGetInvoiceList", pageNo, numberOfRecord);
        return View("InvoiceList",ip);
    

发票分页类-

public class InvoicePaging

    [JsonProperty(PropertyName = "InvoiceList")]
    public List<Invoice> InvoiceList  get; set; 

    [JsonProperty(PropertyName = "count")]
    public int count  get; set; 

【参考方案1】：

在寻找问题的解决方案后，我得到了以下代码。

@(Html.Kendo().Grid<Commission.Vault.Models.Invoice>()
.Name("InvoiceGrid")
.Columns(columns =>

columns.Bound(p => p.CompanyName).Title("Company Name").Width(80);
columns.Bound(p => p.Account).Title("Account").Width(60);
columns.Bound(p => p.MerchantNumber).Title("Merchant No.").Width(60);
columns.Bound(p => p.InvoiceAmount).Title("Invoice Amount").Width(60);
columns.Bound(p => p.ReferralPercentage).Title("Referral %").Width(60);
columns.Bound(p => p.ReferralCommission).Title("Referral Com.").Width(60);
columns.Bound(p => p.DeveloperPercentage).Title("Developer %").Width(60);
columns.Bound(p => p.DeveloperCommission).Title("Developer Com.").Width(60);
)

.EnableCustomBinding(true)
.BindTo(Model.InvoiceList)
.Pageable(
 )
.Sortable()
.Filterable(filterable => filterable
    .Extra(false)
    )
.DataSource(dataSource => dataSource.Server().Total(Model.count).PageSize(15)
 )
 )

Asp.net 中的代码是

public async Task<ActionResult> IndexAsync([DataSourceRequest(Prefix = "InvoiceGrid")] DataSourceRequest request)
    
        List<Invoice> il = new List<Invoice>();
        int pageNo = request.Page-1,numberOfRecord=15;
        InvoicePaging ip = await InvoiceDAL<FileRecord>.getAllInvoices("SProcGetInvoiceList", pageNo, numberOfRecord);
        return View("InvoiceList",ip);
    

唯一的问题是我总是将 pageSize 设为 0。其他一切正常。