I have a jqGrid as mentioned below:
UsersList.aspx
<div id="users" class="grid-right">
<h3>Users</h3>
<table id="client-group-users-list"></table>
<div id="client-group-users-list-pager"></div>
</div>
userlistgroup.js
function createUsersGrid(getUsersForClientGroupUrl) {
$('#client-group-users-list').jqGrid({
height: "auto",
width: "590",
url: getUsersForClientGroupUrl + "?random=" + Math.random(),
rowNum: 10,
mtype: 'POST',
viewrecords: true,
postData: { clientGroup: getClientGroupId(), active: true },
datatype: 'json',
colNames: ['ClientGroupID', 'Login', 'Role'],
//pgbuttons: false,
//pgtext: null,
//viewrecords: false,
gridview: true,
colModel: [
{ name: 'ClientGroupID', index: 'ClientGroupID', hidden: true },
{ name: 'Login', index: 'Login', search: false, width: 130, sorttype: "string" },
{ name: 'Role', index: 'Role', search: false, width: 100 }
],
caption: "Users for client group: " + getClientGroupName(),
pager: '#client-group-users-list-pager',
ondblClickRow: function (userId) {
editUser(userId);
},
sortname: 'Login',
sortorder: 'asc',
loadui: 'enable',
loadError: function (xhr, status) {
location.reload();
}
})
.jqGrid('navGrid', '#client-group-users-list-pager',
{ add: false, del: false, edit: false, search: false, view: false })
}
Sorting on the Login
column is not working. However if I put loadonce:true
then it starts working but the total number of records are not reflected and paging functionality gets stops working.
Can any one help me out in handling both sorting and paging working together with datatype: 'json'
.
Thanks & Regards,
Santosh Kumar Patro
Best Answer
It seems that you have typical understanding problems how jqGrid interact with the server.
If you use
datatype: 'json'
withoutloadonce: true
option then the server is responsible for sorting, paging and optionally searching/filtering of the data. In the case every request to the server contains important input parameters which default values are:page
,rows
,sidx
andsord
. There are other parameters_search
,nd
and some other, but there are not so important in your case. So at the first loading on the grid content jqGrid post to the URLgetUsersForClientGroupUrl
somthing likeThe values of
rows
,sidx
andsord
parameters corresponds the values ofrowNum
,sortname
andsortorder
options which you use. The sever should provide requested page of data (the 1-st page of data, the size of the page is 10 rows). One can useprmNames
option of the grid to renamepage
,rows
,sidx
andsord
parameters.It's important to understand that when the user click on the "Next Page"/Previous Page" buttons or if the user click on the column header to change the sorting then jqGrid makes new request to the server and the server should provide the page of data based on the input parameters.
On the other side if you use
loadonce: true
option then the server should return all the data (all pages). The loaded data should be just sorted corresponds withsidx
andsord
options. After loading of the data jqGrid changedatatype
from"json"
to"local"
. All next sorting, paging and filtering (see filterToolbar method) or sorting (see here and here) will be implemented by jqGrid internally (on the client side).If you need reload the data from the server you should reset the value of
datatype
to"json"
(see the answer). Typically one do this inside of beforeRefresh callback ofnavGrid
. So the grid will be reloaded from the server if the user clicks on the "Refresh" button of the navigator bar.I supposed that you just not changed your server code and the server still returns one page of data when you use
loadonce: true
option. It's wrong. Don't forget to sort initial data on the server.Some common problems in the code which you posted. I recommend you remove
"?random=" + Math.random()
part from the URL because it has no sense. Such method are used typically to prevent caching of server respond in case of usagemtype: "GET"
(HTTP GET verb). You usemtype: 'POST'
. So the response will not changed at all. Moreover if you would usemtype: "GET"
then jqGrid append already URL withnd
parameter which have the same role as yourrandom
parameter. The best way is to setCache-Control
HTTP headers of the server response toprivate, max-age=0
and to removend
withprmNames: { nd: null }
jqGrid option. See the answer and another one for more information about caching.Another problem: you should understand that you can call
createUsersGrid
function only once. After it the<table>
withid="client-group-users-list"
will be modified. The next call ofcreateUsersGrid
function will do just nothing. One should consider whether one need to place JavaScript fragment in the function if it could be called only once. Alternatively one can useGridUnload
method to destroy all existing jqGrid structures before usage it at the next time.If you want that
clientGroup: getClientGroupId()
parameter which will be sent to the server are