Getting and sorting from JSON to jqGrid

Question

I am new to jQuery and jqGrid, and I get two types of JSON content from another system with the following formats:

Option number 1

{ "@timestamp": "2012-03-27T16:19:26Z", "@toplevelentries": 40000, "items": [ { "@entryid": "1-B933790B1DC265ED8025725800728CC5", "@unid": "B933790B1DC265ED8025725800728CC5", "@noteid": "1E76E", "@position": "1", "@read": true, "@siblings": 40000, "$17": "Aaron, Adam", "InternetAddress": " [e-mail] ", "OfficeCountry": "Namibia" }, { "@entryid": "2-9D93E80306A7AA88802572580072717A", "@unid": "9D93E80306A7AA88802572580072717A", "@noteid": "19376", "@position": "2", "@read": true, "@siblings": 40000, "$17": "Aaron, Dave", "InternetAddress": " [e-mail] ", "OfficeCountry": "Brazil" }, { "@entryid": "3-FAFA753960DB587A80257258007287CF", "@unid": "FAFA753960DB587A80257258007287CF", "@noteid": "1D842", "@position": "3", "@read": true, "@siblings": 40000, "$17": "Aaron, Donnie", "InternetAddress": " [e-mail] ", "OfficeCountry": "Algeria" } ] } 

Here jqgrid i is defined as follows:

 $().ready(function(){ jQuery("#list2").jqGrid({ url:'./xGrid2.xsp/peoplejson', datatype: "json", colNames:['#','InternetAddress','Name','OfficeCountry'], colModel:[ {name:'@position',index:'@position', width:50, sortable:true}, {name:'InternetAddress',index:'InternetAddress', width:200, sortable:true}, {name:'$17',index:'$17', width:200, sortable:true}, {name:'OfficeCountry',index:'OfficeCountry', width:200, sortable:true} ], jsonReader: { repeatitems: false, root: "items", id: "@position", records: "@toplevelentries", page:2, total:5 }, sortname: '@position', sortorder: "desc", height:500, rowNum:50, rowList:[50,100,150], caption:"JSON Example", pager: '#pager2' }); }); 

I get data, but sorting and paging do not work.

Option 2

 [ { "@entryid": "1-B933790B1DC265ED8025725800728CC5", "@unid": "B933790B1DC265ED8025725800728CC5", "@noteid": "1E76E", "@position": "1", "@read": true, "@siblings": 40000, "@form": "Person", "$17": "Aaron, Adam", "InternetAddress": " [e-mail] ", "OfficeCountry": "Namibia" }, { "@entryid": "2-9D93E80306A7AA88802572580072717A", "@unid": "9D93E80306A7AA88802572580072717A", "@noteid": "19376", "@position": "2", "@read": true, "@siblings": 40000, "@form": "Person", "$17": "Aaron, Dave", "InternetAddress": " [e-mail] ", "OfficeCountry": "Brazil" }, { "@entryid": "3-FAFA753960DB587A80257258007287CF", "@unid": "FAFA753960DB587A80257258007287CF", "@noteid": "1D842", "@position": "3", "@read": true, "@siblings": 40000, "@form": "Person", "$17": "Aaron, Donnie", "InternetAddress": " [e-mail] ", "OfficeCountry": "Algeria" } ] 

here jqgrid i have is defined as follows:

 $().ready(function(){ jQuery("#list2").jqGrid({ url:'./xGrid4.xsp/peoplejson', datatype: "json", colNames:['InternetAddress','Name', 'OfficeCountry'], colModel:[ {name:'InternetAddress',index:'InternetAddress', width:200}, {name:'$17',index:'$17', width:200}, {name:'OfficeCountry',index:'OfficeCountry', width:200} ], jsonReader: { repeatitems: false, id: "InternetAddress", root: function (obj) { return obj; }, page: function (obj) { return 1; }, total: function (obj) { return 1; }, records: function (obj) { return obj.length; } }, caption:"JSON Example", height:500, sortable:true, rowNum:250, rowList:[250,500,750,1000], pager: '#pager2' }); }); 

Again, not sure if I am defining my jqrig object correctly, since here I have no root element in JSON.

In both cases, sorting does not work, and I cannot correctly fill in the total number of records and pages of the Pager element.

Any help would be appreciated.

Answer 1

You have two main problems. First: sorting. It is very easy to solve. jqGrid with datatype: 'json' request to get only one page of sorted data. If the user changes the sort order or goes to the next page, for example, a new request with other parameters will be sent to the server.

If you want the data to be downloaded only once from the server , and then be sorted or sorted on the local network, you just need to add the loadonce: true parameter to the grid. You must return all correctly sorted data in order to have the correct sort order.

For performance reasons, you should always include gridview: true in your list of options.

Your next problem with the two JSON data formats returned from the server, you can solve in a simple way. You can change jsonReader to the following:

 jsonReader: { repeatitems: false, id: "InternetAddress", root: function (obj) { if ($.isArray(obj)) { return obj; } if ($.isArray(obj.items)) { return obj.items; } return []; }, page: function () { return 1; }, total: function () { return 1; }, records: function (obj) { if ($.isArray(obj)) { return obj.length; } if ($.isArray(obj.items)) { return obj.items.length; } return 0; } } 

Relevant demos: the first and second use the same code, but read different formatted JSON data (the data you published). Both give the same results. I changed rowNum to rowNum: 2 to demonstrate how local paging works. Alternatively, you can use height: 'auto' instead of a fixed height: 500 value. The rowNum used determines the height of the grid.

In addition, I included in the second demo line

 $("#list2").jqGrid('filterToolbar', {stringResult: true, defaultSearch: 'cn', searchOnEnter: false}); 

to demonstrate the degree of filtering of local data . I added another ignoreCase: true parameter to have case-sensitive filtering / data retrieval.