CODEWITHSUNDEEP
jsonjspjqgridpager
Juano7894
Juano7894

Reputation: 830

The pager is not working as expected in jqGrid with a JSON

I have a question about jqGrid and Json.

This is the code of my jsp file with the code of Jquery:

    <body >

    <script type="text/javascript">
        jq(function() {
            jq("#grid").jqGrid({
                url:'/test-security-client/crud',
                datatype: 'json',
                mtype: 'GET',
                colNames:['Id', 'Log Message'],
                colModel:[
                    {name:'id',index:'id', width:55,editoptions:{readonly:true,size:10},hidden:true},
                    {name:'logMsg',index:'logMsg', width:300,editable:true, editrules:{required:true}, editoptions:{size:10}}
                ],
                rowNum:20,
                rowList:[20,40,60],
                height: 450,
                autowidth: true,
                rownumbers: true,
                pager: '#pager',
                sortname: 'id',
                viewrecords: true,
                sortorder: "asc",
                caption:"Error Logs",
                emptyrecords: "Empty records",
                loadonce: false,
                loadComplete: function() {
                },
                jsonReader : {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    cell: "cell",
                    id: "id"
                }
            });

            jq("#grid").jqGrid('navGrid','#pager',
                    {edit:false,add:false,del:false,search:false},
                    { },
                    { },
                    { }, 
                    { 
                        sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
                        closeOnEscape: true, 
                            multipleSearch: true, 
                            closeAfterSearch: true }
            );

            jq("#grid").navButtonAdd('#pager',
                {   caption:"Delete", 
                    buttonicon:"ui-icon-trash", 
                    onClickButton: deleteRow,
                    position: "last", 
                    title:"", 
                    cursor: "pointer"
                } 
            );

            jq("#btnFilter").click(function(){
                jq("#grid").jqGrid('searchGrid',
                        {multipleSearch: false, 
                            sopt:['eq']}
                );
            });

        });
    </script>
   ...

And this is the JSON that I am sending:

{"total":"2","page":"1","records":"28","rows":[{"id":1,"logMsg":"ID of log:1-Requesting authentication. (SMA/SmaAdmin/password)"},{"id":2,"logMsg":"ID of log:2-Authentication received."},{"id":3,"logMsg":"ID of log:3-Test"},{"id":4,"logMsg":"ID of log:4-Test 2"},{"id":5,"logMsg":"ID of log:5-Test 3"},{"id":6,"logMsg":"ID of log:6-Test 4"},{"id":7,"logMsg":"ID of log:7-Test 5"},{"id":8,"logMsg":"ID of log:8-Test 6"},{"id":9,"logMsg":"ID of log:9-Test 7"},{"id":10,"logMsg":"ID of log:10-Test 8"},{"id":11,"logMsg":"ID of log:11-Test 9"},{"id":12,"logMsg":"ID of log:12-Test 10"},{"id":13,"logMsg":"ID of log:13-Test 11"},{"id":14,"logMsg":"ID of log:14-Test 12"},{"id":15,"logMsg":"ID of log:15-Test 13"},{"id":16,"logMsg":"ID of log:16-Test 14"},{"id":17,"logMsg":"ID of log:17-Test 15"},{"id":18,"logMsg":"ID of log:18-Test 16"},{"id":19,"logMsg":"ID of log:19-Test 17"},{"id":20,"logMsg":"ID of log:20-Test 18"},{"id":21,"logMsg":"ID of log:21-Test 19"},{"id":22,"logMsg":"ID of log:22-Test 20"},{"id":23,"logMsg":"ID of log:23-Test 21"},{"id":24,"logMsg":"ID of log:24-Test 22"},{"id":25,"logMsg":"ID of log:25-Test 23"},{"id":26,"logMsg":"ID of log:26-Test 24"},{"id":27,"logMsg":"ID of log:27-Test 25"},{"id":28,"logMsg":"ID of log:28-Test 26"}]}

HERE IS MY QUESTION: This code is working, the jqgrid is well displayed, all the information is comming well. BUT the pager is not working well. Because, I can't move between pages. (I have 2 pages, and I start the jqGrid in the page number 1.. but I cant go to the number 2).

If I change the property loadonce to true.. then Is working. But I dont want to use this property, and all the records are comming in wrong positions.

As I understand the JSON is right, and the code is right, I dont know what I am doing wrong. (I am new to jqGrid and JQuery). I guess that I have one kind of problem with the pager.

Any idea of what I am doing wrong? Do I have to send a Json with the information of each page?

Upvotes: 1

Views: 3142

Answers (1)

Oleg
Oleg

Reputation: 221997

You JSON is correct as JSON, but it's not corresponds to the data requested by jqGrid. Let us I explain this.

You have rowNum: 20, sortname: 'id', sortorder: "asc". At the beginning (at the first filling of the grid) jqGrid send to your server at the URL '/test-security-client/crud' the request having page=1&rows=20&sidx=id&sord=asc at the end of the URL: /test-security-client/crud?page=1&rows=20&sidx=id&sord=asc. It means that in the response from the server you should include only first 20 items from the result set sorted by id. So you have to sort the result set by id (see sidx=id and sord=asc - ORDER BY id) and then get the first page (page=1) where the size of the page is 20 (rows=20 - SELECT (TOP 20)).

You current response from the server includes all 28 of the result set. For the first page it's not critical, but I suppose that the response on request of the second page contains the same 28 items instead of only the last 8 items (the sorting is very important to get correct 8 items).

If you would fix the problem in your server code the grid will display correct data on changing of the page.

Upvotes: 2

Related Questions