Серверный пейджинг на стороне сервера в JQGrid

Question

Я пытаюсь реализовать страничный пейджинг на стороне сервера в JQGrid. Может ли любой орган помочь мне в том, как его достичь. В настоящее время клиентская сторона отлично работает в моей сетке, но хочет изменить ее на серверную.

Answer 1

Взято из: http://yassershaikh.com/how-to-use-jqgrid-with-asp-net-mvc/

Если вы работали с JqGrid, прежде чем не будет, без сомнения, знакомы с параметрами по умолчанию, переданных любой АЯКС запросу: «страницы», «строк», «sidx» & «Sord» , Эти параметры соответствуют текущей странице, записям на странице, столбцу сортировки и порядку сортировки соответственно.

Снимок экрана, приведенный ниже, поможет вам лучше понять это.

Таким образом, чтобы справиться с этим я подготовил класс под названием «JqGridObject».

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 данные из контроллера, используя этот 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 вызова.

<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",

$("#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; 
    } 
}); 

Изменение номеров страниц:

Initialize одна переменная: 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); 

Чтобы изменить вид записей @ Botton Справа:

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); 
} 

, если вы считаете это полезным, подсказать.