loadonce:true causing issues in paging for jqGrid
It seems that you have typical understanding problems how jqGrid interact with the server.
If you use datatype: 'json'
without loadonce: 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
and sord
. 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 URL getUsersForClientGroupUrl
somthing like
page=1&rows=10&sidx=Login&sord=asc
The values of rows
, sidx
and sord
parameters corresponds the values of rowNum
, sortname
and sortorder
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 use prmNames
option of the grid to rename page
, rows
, sidx
and sord
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 with sidx
and sord
options. After loading of the data jqGrid change datatype
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 of navGrid
. 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 usage mtype: "GET"
(HTTP GET verb). You use mtype: 'POST'
. So the response will not changed at all. Moreover if you would use mtype: "GET"
then jqGrid append already URL with nd
parameter which have the same role as your random
parameter. The best way is to set Cache-Control
HTTP headers of the server response to private, max-age=0
and to remove nd
with prmNames: { 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>
with id="client-group-users-list"
will be modified. The next call of createUsersGrid
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 use GridUnload
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
santosh kumar patro
Updated on June 08, 2022Comments
-
santosh kumar patro almost 2 years
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 putloadonce: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
-
santosh kumar patro almost 11 yearsCool explanation with details. It helped me a lot to understand the problem of loadonce very well.Thanks a lot :)