jqGrid pagination page number text box not updating

Question

It's kinda weird but whatever I do the page number field in the pager is not updating. I can enter page number and it will return proper records, it returns proper page number info on calling

$('#jqGrid01').getGridParam('page')

If I use pager buttons it will refresh the grid properly but NOT update the page number in the text field!

Here is the grid code..

jQuery("#jqGrid01").jqGrid({
// data: mydata, datatype: "local",
url:'localhost/gridx/dashb_grid', mtype : "get", datatype: "json",
jsonReader: { root: "rows", page: "page", total: "total", records: "records", repeatitems: true, cell: 'cell', id: 'stock1', userdata: 'userdata'},
height: $gridh, rowNum: 100, rowList: [100,200,300,500,1000,2000,3000],
colNames:['Stock 1','Stock 2', 'Price 1', 'Price 2','Ratio','Correlation','ST % Mean', 'ST Drift', 'LT % Mean', 'LT Drift', 'RSI', 'RSI Drift', 'Beta 1', 'Beta 2',     'Industry 1', 'Industry 2', 'Earnings 1', 'Earnings 2'],
colModel:[
    {name:'stock1',index:'stock1', width:30, searchoptions:{sopt:['eq','ne','cn','bw','ew','lt','gt']}},
    {name:'stock2',index:'stock2', width:30, searchoptions:{sopt:['eq','ne','cn','bw','ew','lt','gt']}},
    {name:'price1',index:'price1', width:30, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'price2',index:'price2', width:30, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'ratio',index:'ratio', width:30, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'correlation',index:'correlation', width:42, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'st_mean',index:'st_mean', width:38, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'st_drift',index:'st_drift', width:35, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'lt_mean',index:'lt_mean', width:39, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'lt_drift',index:'lt_drift', width:35, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'rsi',index:'rsi', width:30, sorttype:"int", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'rsi_drift',index:'rsi_drift', width:35, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'beta1',index:'beta1', width:30, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'beta2',index:'beta2', width:30, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'industry1',index:'industry1', width:102, search:false},
    {name:'industry2',index:'industry2', width:102, search:false},
    {name:'earnings1',index:'earnings1', width:45, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}},
    {name:'earnings2',index:'earnings2', width:45, sorttype:"float", align:"right", searchoptions:{sopt:['eq','ne','lt','gt']}}
],
pager: "#jqGridPager01",
viewrecords: true, hidegrid:false,
sortname: 'stock1', sortorder: 'asc',
loadComplete: function() {
    // test

}
});

Also tried inspecting the textbox element but it has no id so I can't manually set it and I couldn't find anything in jqGrid docs or google to set it!!

Any idea what I'm doing wrong, how to fix it!

Thanks

Answer 1

You have to include loadonce:true for your pagination to work.

It indicates to do the client side pagination rather than server side pagination

Also it indicates that you are loading all the records at the same time

If you do not want to load all the records at a time , then is a completely different scenario where you need to take care of paging parameters in the url for fetching data in the server side.

When you are using server side paging, jqgrid automatically posts parameters called page and rows.

Here, Page indicates the current page you are in and rows indicates number of records per page.

So, you need send these params to database and fetch accordingly to get data page wise.

Since, you mentioned datatype as JSon which means server side processing. it assumes that you are interested in Server side paging.

it expects you return page and rows in JSOn response. Since you json does not contain any of these, it is by default showing as zero.

So, the pagination obviuosly will not work.

If you are using dotnet for server side: here is the small example:

   [HttpPost]
        public JsonResult LoadPackages(int page, int rows, string sord, string sidx, string PackageNumber)
        {

            liPackages = new List<PackageModel>();
            if (PackageNumber == "")
            {
                liPackages = _packageRepository.LoadPackages((page - 1) * rows, rows, sord, sidx, out strTotalRecords);
                long lCount = Convert.ToInt64(strTotalRecords);
                return Json(new
                {
                    total = Math.Ceiling((Decimal)lCount / (Decimal)rows),
                    page = page,
                    records = lCount,
                    rows = liPackages
                },
                JsonRequestBehavior.AllowGet);
            }
          }

Updated2:

Can you try including gridview:true

Updated3

Change method type from GET to POST like this : mType:POST