5

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!!!

Slim
  • 1,708
  • 5
  • 37
  • 60
  • can you share the server side paging code? My grid is not showing total records count. I am new to jQGrid and trying to fix it. – Mubarak Oct 26 '13 at 08:08

2 Answers2

5

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • yes, it's `datatype: "jsonstring"` I just tried to fix it, but when I change it to `json`, I'm getting an empty grid. :( – Slim Jan 16 '13 at 09:51
  • @Slim: You should include more full code which you currently use: full `colModel`, `jsonReader`, `jsonReader`, `beforeProcessing` and the example of the server response (at least two items of data): the JSON response. – Oleg Jan 16 '13 at 09:55
  • Please check my post again. – Slim Jan 16 '13 at 09:57
  • @Slim: You posted too many code without description. I see only one grid in the code: `"#userslist"`. The URL to fill the grid seems be `url:"admin"`. What are parameters which need be sent to the URL? I see `{WrJOB : "selectTA", `companyId: $("#companyId").val()`}` which more? Which name of parameters you use for the page number, for the size of the page, for the name of sorted column and for the sorting direction? What is the JSON response from `url:"admin"? You can just use Firebug to trace HTTP request and response. – Oleg Jan 16 '13 at 10:27
  • @Slim: I can't use cut&paste to include JSON response in my demo. If you provide the information which I asked in my last comment I could show you how you can use `url:"admin", datatype: "json"` instead of making separate Ajax call and use `datatype: "jsonstring", datastr: JSON.stringify(gridDtls)` which is origin of your problem. – Oleg Jan 16 '13 at 11:53
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/22825/discussion-between-slim-and-oleg) – Slim Jan 16 '13 at 11:56
  • @Slim: You are welcome! You can find [here](http://stackoverflow.com/a/2928819/315935) more information about the usage of methods (functions) inside of `postData`. [Here](http://stackoverflow.com/a/10408057/315935) there are one more variant of usage. – Oleg Jan 16 '13 at 14:21
1

Haven't worked with jqgrid before but found this line in the wiki:

If you use a jsonstring to obtain the data - after the data is retrieved the datatype option automatically is set to local - i.e. (currently) the paging will not work!

simplyray
  • 1,200
  • 1
  • 16
  • 25