KendoUI Grid serverpaging

Question

我想用JSON數據填充一個KendoUI網格，其中服務器返回數據的總行數，但是我在使serverPaging正常工作時遇到了一些麻煩。我創建和分配電網的數據源如下：

   var oDS = new kendo.data.DataSource({ 
        schema: { 
         data: "data", 
         total: "total" 
        }, 
        data: self.grdTableData, 
        serverPaging: true, 
        pageSise: 50, 
        total: joOutput["TotalRecords"] 
       }); 

       grdTableResults.setDataSource(oDS); 

，並在第一頁顯示的939條記錄第50，但只有過1頁（導航箭頭從來沒有任何迴應），我看到的NaN - 939件物品的NaN以及網格中心的旋轉圓圈永不消失。

在我看過的所有例子中，有一點是我的$ .ajax調用和.done中JSON數據的處理不使用「transport：read」，但我在想我如何發送數據並將其取回應該無關緊要（或者是因爲每個頁面請求都是新服務器讀取？）。但我認爲我做得不夠好，無法正確處理服務器分頁，儘管看起來我設置的數據源值與示例中設置的數據源值相似，如http://jsfiddle.net/rusev/Lnkug/。然後是我不確定的「take」和「skip」值，但是我有發送到可以在那裏使用的服務器的「startIndex」和「rowsPerPage」。我假設網格可以告訴我我在什麼頁面上顯示我可以適當地設置我的「startIndex」，並且如果我有「每頁項目數」下拉列表，我可以重置我的「rowsPerPage」值嗎？

無論如何，抱歉。所有的新手問題的任何幫助和建議是真正不勝感激謝謝

Answer 1

運輸：！讀

您應該能夠使用「運輸：讀」即使你有自定義的邏輯通過將該值設置爲我創建了一個JS Fiddle來演示這個功能。

dataSource: { 
    serverPaging: true, 
    schema: { 
     data: "data", 
     total: "total" 
    }, 
    pageSize: 10, 
    transport: { 
     read: function(options) { 
      var data = getData(options.data.page); 
      options.success(data); 
     } 
    }, 
    update: function() {} 
} 

您的讀取函數包含一個參數，其中包含以下分頁屬性：page，pageSize，skip，take。請記住，如果一個操作包含某個功能，則所有傳輸操作都必須是功能。

startIndex和rowsPerPage

如果您的服務器接受這些參數，你應該能夠提交他們在讀功能。創建一個新的Ajax調用那個帖子自定義數據

var ajaxPostData = { startIndex: options.data.skip, rowsPerPage: options.data.pageSize } 

Answer 2

這是我用來實現服務器與分頁劍道網格服務器端包裝代碼：

@(Html.Kendo().Grid<IJRayka.Core.Utility.ViewModels.ProductDto>() 
.Name("productList") 
.Columns(columns => 
{ 
    columns.Bound(prod => prod.Name); 
    columns.Bound(ord => ord.Brand); 
    columns.Bound(ord => ord.UnitPackageOption); 
    columns.Bound(ord => ord.CategoryName); 
    columns.Bound(ord => ord.Description); 
}) 
.Pageable(pager => pager.PageSizes(true)) 
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple)) 
.PrefixUrlParameters(false) 
.DataSource(ds => ds.Ajax() 
      .Model(m => m.Id(ord => ord.ID)) 
      .PageSize(5) 
      .Read(read => read 
       .Action("FilterProductsJson", "ProductManagement") 
       .Data("getFilters")) 
      ) 
) 

凡getFilters是javascript函數當我想要從url/service獲取數據時，將我的自定義過濾器參數傳遞給網格：

function getFilters() { 
    return { 
     brand: $("#Brand").val(), 
     name: $("#Name").val(), 
     category: $("#CategoryName").val() 
    }; 
} 

此外，你應該使用劍道的DataSourceRequest類象下面這樣實現您的控制器的操作方法，否則就無法正常工作，你所希望的方式：

public JsonResult FilterProductsJson([DataSourceRequest()] DataSourceRequest request, 
           // three additional paramerters for my custom filtering 
           string brand, string name, string category) 
{ 
    int top = request.PageSize; 
    int skip = (request.Page - 1) * top; 
    if(brand != null) 
     brand = brand.Trim(); 
    if(name != null) 
     name = name.Trim(); 
    if(category != null) 
     category = category.Trim(); 

    var searchResult = new ManageProductBiz().GetPagedFilteredProducts(brand, name, category, top, skip); 
    // remove cyclic references: 
    searchResult.Items.ForEach(prd => prd.Category.Products = null); 

    return Json(new DataSourceResult { Data = searchResult.Items, Total = searchResult.TotalCount }, JsonRequestBehavior.AllowGet); 
}