Can't show the last page even with the correct parameters

Question

I'm fighting with jqgrid about 8 days(or more), I have done everything excepting a small isuue. I have a big database and I'm trying to show it by portions. What I mean is that the sql query is executed every time when next, prev, last, first or when the user enters a page number. I have managed it and everything is correct, but now the grid is not showing the correct last page. What I mean is that even when there are 42 pages it's showing 1 of 1.

Now when I enter the page number the grid is refreshing and showing the correct results, but the pager is saying 2 of 1, 5 of 1 and so on.

What I have used is:

jQuery("#list").jqGrid({ 
        datatype: "jsonstring",
        datastr: JSON.stringify(gridDtls),
        jsonReader:{
          root: "rows",
          page: "page",
          total: "total",
          records: "records",
          repeatitems: false,
          id: "0"
        },

The code I'm using to run the query every time when a button is clicked is here(Note the below code is working only when enter is pressed as the buttons are inactive):

onPaging: function(pgButton){ 
            var status = returnUserStatus();
            var page1 = $(this).jqGrid("getGridParam", "page");
            var totalPages = $(this).getGridParam('lastpage');

            if(pgButton=="next_pager"){ 


            } 
            if(pgButton=="prev_pager"){ 


            } 
            if(pgButton=="last_pager"){ 

            }
            if(pgButton=="first_pager"){ 

            }else if((pgButton !="first_pager") && (pgButton !="last_pager") && (pgButton !="prev_pager") && (pgButton !="next_pager"))     

        },

Everything seems correct to me. Why jqgrid is not returning the correct pages?I'm sure that I'm missing somthing small. Please help me!!!

Answer 1

I suppose that the reason of your problem is datatype: "jsonstring" which you use with server side paging. Instead of that you should use datatype: "json".

For understanding: the type datatype: "jsonstring" is almost the same as datatype: "local". The most important difference is that jqGrid uses jsonReader in case of datatype: "jsonstring" instead of localReader used in case of datatype: "local". The number pages will be calculated by jqGrid and the values of total and records from the server response will be ignored.

jqGrid provide a lot of customization option to send almost any Ajax request to the server and read almost any response. You need just use the corresponding options. Because you don't post any details about the server interface I can't write here more details.

I recommend you to examine options prmNames, ajaxGridOptions and the callback serializeGridData and loadBeforeSend. The option allows to customize the request to the server. Another options jsonReader and jsonmap and the callback beforeProcessing allows to read the server response.

UPDATED: The demo demonstrate how you can use datatype: "json" to send Ajax requests automatically on paging of jqGrid. It's vary important to choose id of the grid. In your case it seems be login column. So the code could be

$("#userslist").jqGrid({
    url: "admin",
    postData: {
        WrJOB: "listUsers",
        companyId: function () { return $("#companyId").val(); },
        userStatus: function () { return returnUserStatus(); }
    },
    jsonReader: {
        root: "gridDtls.rows",
        page: "gridDtls.page",
        total: "gridDtls.total",
        records: "gridDtls.records",
        repeatitems: false
    },
    prmNames: {page: "pageNum"},
    colModel: [
        {name: 'login', key: true, ...}
    ...
});

The request to the URL "admin" will contains pageNum parameter automatically. The value of "rows" parameter will be 20. It's the size of the page. If the user choose another value in the pager (see rowList: [20, 40, 60]) the current value will be send to the server. The option prmNames renames default parameter "page" to "pageNum". In the same way you can rename any other parameter which send jqGrid to the server. Usage null as the value will prevent sending of parameters to the server. For example you can use

prmNames: {page: "pageNum", nd: null, search: null, sort: null, order: null}

to eliminate sending of parameters which you don't use.