jqgrid datatype:json for url request, and json response not work to populate

Question

I want to make a request (sync) to the server to populate the jqGrid. I did this:

$table.jqGrid({ 
                    datatype: "json",
                    url:'takepage/page=1',
                    mtype: 'GET',
                    ajaxSubgridOptions: { async: false },
                    colNames:['Result','Test'], 
                    colModel:[ {name:'result',index:'result',width:120}, 
                               {name:'test',index:'test', width:120}
                              ], 
                     pager: "#"+pager,
                     caption: "TESTjqGrid sync request to server",

                     jsonReader: {
                            repeatitems: false,
                            page: function(obj) { 
                                return obj.page; 
                            },
                            total: function(obj) { 
                                return obj.total; 
                            },
                            root: function (obj) { 
                                console.log(obj);
                                return obj; 
                            },
                            records: function (obj) { 
                                console.log(obj.rows.length);
                                return obj.rows.length; 
                            }

                        }

                }).jqGrid('navGrid', "#"+pager, {
                    add:    false,
                    edit:   false,
                    del:    false,
                    search: false,
                    refresh:false
                });

the json respose of server is this:

{"total":1,"page":1,"rows":[{"result":null,"test":"val"}],"records":1}

Where is the error? Thanks!

Answer 1

You should use jsonReader which corresponds the data which you posted. In case of JSON data which you posted you should use jsonReader: {repeatitems: false}. Many other options from jsonReader are correct, but root is wrong. You have to remove root property from jsonReader or change it to root: "rows" or root: function (obj) { return obj.rows; } (usage of return obj; is false).

Additionally I recommend you to use loadonce: true if your server don't implemented server side paging of data. In any way options gridview: true and height: "auto" are recommended.