JQGrid服務器端分頁

Question

我想在JQGrid中實現服務器端分頁。任何機構可以幫助我如何實現它。目前客戶端在我的網格中工作正常，但希望將其更改爲服務器端。

Answer 1

來自：http://yassershaikh.com/how-to-use-jqgrid-with-asp-net-mvc/

如果您有jqGrid的工作，你會毫無疑問熟悉傳遞給任何Ajax請求的默認參數才道：「網頁」，「行」，「SIDX」 &「SORD」 。這些參數分別對應於當前頁面，每頁記錄，排序列和排序順序。

下面的截圖會幫助你更好地理解這一點。

因此，要處理這個我已經準備了一個名爲「JqGridObject」類。從控制器使用這個JqGridObject類

public ActionResult GetJqGridData(string page, string rows, string sidx, string sord) 
{ 
    var jqGridData = new JqGridObject() 
    { 
     Data = GetSomeSampleData(), 
     Page = page, 
     PageSize = 3, // u can change this ! 
     SortColumn = sidx, 
     SortOrder = sord 
    }; 

    return Json(jqGridData, JsonRequestBehavior.AllowGet); 
} 

public List<Fruit> GetSomeSampleData() 
{ 
    return new List<Fruit> 
    { 
     new Fruit{Id = 1, Name = "Apple" }, 
     new Fruit{Id = 2, Name = "Melon" }, 
     new Fruit{Id = 3, Name = "Orange" }, 
     new Fruit{Id = 4, Name = "Grapes" }, 
     new Fruit{Id = 5, Name = "Pineapple" }, 
     new Fruit{Id = 6, Name = "Mango" }, 
     new Fruit{Id = 7, Name = "Bannana" }, 
     new Fruit{Id = 8, Name = "Cherry" } 
    }; 
} 

的jqGrid jquery的呼叫

public class JqGridObject 
{ 
    public string Page { get; set; } 
    public int PageSize { get; set; } 
    public string SortColumn { get; set; } 
    public string SortOrder { get; set; } 
    public List<Fruit> Data { get; set; } 
} 

public class Fruit 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
} 

發送JSON數據。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myGrid").jqGrid({ 
      url: '@Url.Action("GetJqGridData")', 
      datatype: 'json', 
      myType: 'GET', 
      colNames: ['Id', 'Name'], 
      colModel: [ 
       { name: 'Id', index: 'Id' }, 
       { name: 'Name', index: 'Name' } 
      ], 
      jsonReader: { 
       root: 'Data', 
       id: 'id', 
       repeatitems: false 
      }, 
      pager: $('#myPager'), 
      rowNum: 5, 
      rowList: [2, 5, 10], 
      width: 600, 
      viewrecords: true, 
      caption: 'Jqgrid MVC Tutorial' 
     }); 
    }); 
</script> 

<table id="myGrid"></table> 
<div id="myPager"></div> 

Answer 2

我看到jqGrid的服務器端分頁許多選擇，但他們都不是有效的爲我們的要求。

我所做的是在查詢字符串中放入LIMIT：startLimit，：endLimit。

根據記錄啓用和禁用nextPager和prevPager。

假設我想顯示5所記錄的每一頁，

var startLimit=0; 
var endLimit=5; 

當用戶點擊 「下一步」，

$("#next_pager").click(function() { 
    startLimit = startLimit+ endLimit; 
    // here comes your AJAX call with passing two parameter(startLimit,endLimit) 
}); 

當 「上一頁」 用戶點擊，

$("#prev_pager").click(function(){ 
    if (startLimit == 0) 
    { 
     $("#prev_pager").addClass("ui-state-disabled"); //disable previous pager icon 
    } 
    else 
    { 
     startLimit = startLimit - endLimit; 
    } 
}); 

改變頁碼：

初始化一個變量：var pageInputValue=1;當用戶點擊 「NEXT」

，

$(".ui-pg-input").val(eval(parseInt(pageInputValue)+1)); 
pageInputValue = eval(parseInt(pageInputValue)+1); 

當用戶點擊 「上一步」，

$(".ui-pg-input").val(eval(parseInt(pageInputValue)-1)); 
pageInputValue = eval(parseInt(pageInputValue)-1); 

要更改查看記錄@波頓右：

if(eval(startLimit+endLimit) > result) 
{ 
    $(".ui-paging-info").text("View "+eval(startLimit+1) +" - "+result+" of "+result); 
} 
else 
{ 
    $(".ui-paging-info").text("View "+eval(startLimit+1) +" - "+eval(startLimit+endLimit)+" of "+result); 
} 

如果您覺得它有用，請將它計算在內。