Server Side Paging in JQGrid

Question

I am trying to implement Server side paging in JQGrid. Can any body helps me to how to achieve it. Currently client side is working fine in my grid but wanted to change it to server side.

Answer 1

Taken from : http://yassershaikh.com/how-to-use-jqgrid-with-asp-net-mvc/

If you have worked with JqGrid before you will no doubt be familiar with the default parameters passed to any ajax request: “page”, “rows”, “sidx” & “sord”. These parameters correspond to current page, records per page, sort column, and sort order respectively.

The screenshot below, will help you understand this better.

So, to handle this I have prepared a class called ‘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; }  
} 

Send json data from controller using this JqGridObject class

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 call.

<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

i saw many options for server side pagination in jqgrid , but none of them are efficient for our requirements .

what i did is putting LIMIT :startLimit, :endLimit in Query String.

enable and disable nextPager and prevPager based on the records.

suppose i want to show 5 records for each page,

var startLimit=0;
var endLimit=5;

when user clicks on "NEXT" ,

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

when user clicks on "Previous" ,

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

to changing the Page Numbers :

Initialize one variable : var pageInputValue=1;

when user clicks on "NEXT" ,

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

when user clicks on "Previous" ,

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

To change the View Records @ Botton Right :

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

if you find it useful, make it count.