Question

I’m using jqGrid in an ASP.NET MVC webapp. When the page first loads, the pager buttons are disabled and always show Page 1 of 1. However, if I change the page size, sort a column or perform a search, the pages update appropriately.

I’ve tried triggering reloadGrid in both gridComplete and loadComplete but neither are doing the trick. What is being called when I perform the other actions that gets the paging to refresh?

Here is my grid:

$(document).ready(function () {
    $('#grid').jqGrid({
        url: '@Url.Action("GetGridData", "MyController")',
        datatype: 'json',
        loadonce: true,
        mtype: 'POST',
        postData: {},
        colNames: ['Name', 'Price', 'Inventory'],
        colModel: [
            { name: 'Name', index: 'Name' },
            { name: 'Price', index: 'Price', sorttype: 'float', formatter: 'number', align: 'right' },
            { name: 'Inv', index: 'Inv', sorttype: 'int', align: 'right' }
        ],
        pager: '#gridpager',
        rowNum: 10,
        rowList: [5, 10, 20, 50, 100],
        sortname: 'Name',
        sortorder: 'asc',
        viewrecords: true,
        caption: 'Inventory',
        hidegrid: false,
        forceFit: true,
        height: 'auto',
        width: 1200
        //loadComplete: function() {     
        //    $('#grid').trigger("reloadGrid");
        //},
        //gridComplete: function () {
        //    $('#grid').trigger("reloadGrid");
        //}
    }).jqGrid('filterToolbar', { searchOnEnter: false }).jqGrid('navGrid', '#gridpager', { del: false, add: false, edit: false, search: false });

Server code:

[HttpPost]
public JsonResult GetGridData(string sidx, string sord, int page, int rows)
{
    List<Inventory> data = InventoryModel.GetInventory();

    var count = data.Count;

    var jsonData = new
        {
            total = (int)Math.Ceiling((double)count / rows),
            page = 1,
            records = count,
            rows = (from row in data
                    select new
                    {
                        id = row.Name,
                        cell = new object[]
                            {
                                row.Name,
                                row.Price,
                                row.Inv                         
                            }
                    }).ToArray()
        };
    return Json(jsonData);
}

JSON data:

{
  "total":11,
  "page":1,
  "records":104,
  "rows": [ { "id":"PRODUCT-1", "cell":["PRODUCT-1",0.52,41] },
            { "id":"PRODUCT-2", "cell":["PRODUCT-2",0.43,50] },
          ... ]
}

Answer 1

I am almost sure that the reason is the wrong JSON data which return the server. I suppose that the server returns total equal to 1 independent from the rowNum which will be send to the server as the rows parameter. It’s important to understand that the grid body will be have the first rowNum (10) rows in the same order like from the server response. Because you use loadonce: true then the next refreshing of grid work locally and so it works correct. In any way the server should fill correct total parameter and it should use provide the data sorted corresponds to sortname and sortorder option of jqGrid. The parameters will be sent to the server as sidx and sord.

UPDATED: The reason if the bug in jqGrid 4.3.1

the line

ts.p.lastpage = Math.min( ts.p.page, Math.ceil(len/ rn) );

should be fixed to

ts.p.lastpage = Math.ceil(len/ rn);

For more information see my bug report here and the fix in the version of jqGrid on github here