I can't seem to get jqGrid pagination to work. It is not making a request when I click next/prev/reload or when I try to filter. As soon as I click any of those buttons, all of the records disappear.
This is the initial request that gets sent, so you can see that all of those parameters are being passed in.
;bucketId=444&_search=false&nd=1366982305621&rows=20&page=1&sidx=PKId&sord=desc
This returns proper number of records, and if I manually execute it and pass in let's say page=2 I do get proper set back. The problem seems to be that the request is not made.
jQuery("#grid").jqGrid({
url:'/GetAllOrders',
mtype: "GET",
datatype: "json",
jsonReader: {
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
repeatitems: false,
userdata: "UserData",
id: "Id"
},
postData: {
contactId: currentUserId,
bucketId: currentBucketId
},
colNames:[
'Id',
'Cancel',
'Order #',
'Order Date',
'Bucket',
'Warehouse',
'Destination',
'Status',
'Tracking #',
'Transport By',
'Ordered By',
'Order Items'
],
colModel:[
{name:'Id',index:'Id', width:5, align:"center", hidden: true},
{name:'Cancel', index:'Cancel',width:80, align:"center", formatter: cancelLinkFormatter, search:false },
{name:'OrderNumber',index:'OrderNumber', width:80, align:"center"},
{name:'OrderDate',index:'OrderDate', width:140, align:'right'},
{name:'Bucket',index:'Bucket', width:180, align:"center", hidden: false},
{name:'Warehouse',index:'Warehouse', width:80, align:"center", hidden: true},
{name:'Destination',index:'Destination', width:150},
{name:'StatusCode', index:'StatusCode', width:100, align: 'center'},
{name:'TrackingNumber', index:'TrackingNumber', width:100, align: 'center'},
{name:'TransportCompany', index:'TransportCompany', width:100, align: 'center'},
{name:'OrderedBy', index:'OrderedBy', width:100, align: 'center'},
{name:'OrderItems', index:'OrderItems', width:100, align: 'center'}
],
viewrecords: true,
rowNum: 20,
autowidth: false,
width: 860,
height: 450,
rowList:[10,20,30,40,50],
pager: jQuery('#pager'),
sortname: 'Id',
align: 'center',
sortorder: "desc",
loadonce: false,
ignoreCase: true,
caption:"Orders"
}).navGrid('#pager',{edit:false,add:false,del:false});
setSearchSelect('StatusCode');
jQuery("#grid").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: "cn"});
This is the json response I get from the server on initial load.
{
"Total":2,
"Page":1,
"Records":28,
"Rows":[
{
"PKId":1234,
"OrderNumber":"XXXXXX97",
"Cancel":"Cancel",
"OrderDate":"Jul 11 2012 12:37PM",
"Warehouse":"",
"Bucket":"xxxxxxxx",
"StatusCode":"Shipped Complete",
"StatusLink":"View Info",
"TrackingNumber":"xxxxxxx",
"TransportCompany":"xxxxxxxx",
"Destination":"xxxxxxx",
"BucketId":110,
"ShippingEmail":"xxxxxxxx",
"OrderedBy":"xxxxxxxx",
"OrderItem":"xxxxxxx"
},
.... MORE DATA HERE ... 20 OBJECTS ALL-TOGETHER WITHIN Rows Array
{
"PKId":13434,
"OrderNumber":"XXXXXX97",
"Cancel":"Cancel",
"OrderDate":"Jul 11 2012 12:37PM",
"Warehouse":"",
"Bucket":"xxxxxxxx",
"StatusCode":"Shipped Complete",
"StatusLink":"View Info",
"TrackingNumber":"xxxxxxx",
"TransportCompany":"xxxxxxxx",
"Destination":"xxxxxxx",
"BucketId":110,
"ShippingEmail":"xxxxxxxx",
"OrderedBy":"xxxxxxxx",
"OrderItem":"xxxxxxx"
},
],
"UserData":null
}
Any suggestions?
Btw, the pagination and filtering was working just fine when I used loadonce: true and when I loaded all data at once, however, due to too many records I simply have to switch to server-side.
EDIT
I found the problem. First of all, I am sorry for not including the rest of the code.
You see, I also had loadComplete and that was causing the problem for me.
Code in the question will work, so I want to thank everyone for participating.
This is the loadComplete that caused the problem. Once I removed it it started paging properly.
loadComplete: function() {
setParamsOnComplete();
var myGrid = jQuery("#grid");
var ids = myGrid.getDataIDs();
for (var i = 0, idCount = ids.length; i < idCount; i++) {
jQuery("#"+ids[i]+" a",myGrid[0]).click(function(e) {
var hash=e.currentTarget.hash;// string like "#?id=0"
if (hash.substring(0,6) === "#S?id=") {
var id = hash.substring(6,hash.length);
var text = this.textContent || this.innerText;
dialog.dialog({ title: 'Status Information',
buttons:{ Ok: function() {
jQuery( this ).dialog("close");
}
},
open: function() {
jQuery('.ui-dialog-buttonpane').find('button:contains("Ok")').css('font-size', '10px');
}
});
dialog.dialog('open');
}
if (hash.substring(0,6) === "#C?id=") {
var id = hash.substring(6,hash.length);
var text = this.textContent || this.innerText;
var changed = false;
var additionalMesages = "";
jQuery.post("DataFetcher.asp", { 'action': "cancelOrder", 'id':id }, function(xml) {
changed = (xml === 'True');
additionalMesages = xml;
}).success(function(){
if (changed){
showDialogCustomTitle("Success", "You've successfully cancelled the order " + id + ".");
jQuery("#grid").setGridParam({datatype:'xml', page:1}).trigger('reloadGrid');
}else if (additionalMesages.split("_")[1] == "2"){
showDialogCustomTitle("Error", additionalMesages.split("_")[2]);
}else if (additionalMesages.split("_")[1] == "1"){
showDialogCustomTitle("Error", additionalMesages.split("_")[2]);
}
});
}
//e.preventDefault();
});
}
},
Next task for me is to perhaps figure out why loadComplete cause the problem.
EDIT 2
Found the first issue with loadComplete. I was too tired last night to notice it, but the leftover code from the period when this grid was populated with xml and paged on client side definitely caused the problems. Thank you all for involvement again. :)
jQuery("#grid").setGridParam({datatype:'xml', page:1}).trigger('reloadGrid');
I can't seem to get jqGrid pagination to work. It is not making a request when I click next/prev/reload or when I try to filter. As soon as I click any of those buttons, all of the records disappear.
This is the initial request that gets sent, so you can see that all of those parameters are being passed in.
https://www.xxxxxxx./getallorders?contactId=333&bucketId=444&_search=false&nd=1366982305621&rows=20&page=1&sidx=PKId&sord=desc
This returns proper number of records, and if I manually execute it and pass in let's say page=2 I do get proper set back. The problem seems to be that the request is not made.
jQuery("#grid").jqGrid({
url:'/GetAllOrders',
mtype: "GET",
datatype: "json",
jsonReader: {
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
repeatitems: false,
userdata: "UserData",
id: "Id"
},
postData: {
contactId: currentUserId,
bucketId: currentBucketId
},
colNames:[
'Id',
'Cancel',
'Order #',
'Order Date',
'Bucket',
'Warehouse',
'Destination',
'Status',
'Tracking #',
'Transport By',
'Ordered By',
'Order Items'
],
colModel:[
{name:'Id',index:'Id', width:5, align:"center", hidden: true},
{name:'Cancel', index:'Cancel',width:80, align:"center", formatter: cancelLinkFormatter, search:false },
{name:'OrderNumber',index:'OrderNumber', width:80, align:"center"},
{name:'OrderDate',index:'OrderDate', width:140, align:'right'},
{name:'Bucket',index:'Bucket', width:180, align:"center", hidden: false},
{name:'Warehouse',index:'Warehouse', width:80, align:"center", hidden: true},
{name:'Destination',index:'Destination', width:150},
{name:'StatusCode', index:'StatusCode', width:100, align: 'center'},
{name:'TrackingNumber', index:'TrackingNumber', width:100, align: 'center'},
{name:'TransportCompany', index:'TransportCompany', width:100, align: 'center'},
{name:'OrderedBy', index:'OrderedBy', width:100, align: 'center'},
{name:'OrderItems', index:'OrderItems', width:100, align: 'center'}
],
viewrecords: true,
rowNum: 20,
autowidth: false,
width: 860,
height: 450,
rowList:[10,20,30,40,50],
pager: jQuery('#pager'),
sortname: 'Id',
align: 'center',
sortorder: "desc",
loadonce: false,
ignoreCase: true,
caption:"Orders"
}).navGrid('#pager',{edit:false,add:false,del:false});
setSearchSelect('StatusCode');
jQuery("#grid").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: "cn"});
This is the json response I get from the server on initial load.
{
"Total":2,
"Page":1,
"Records":28,
"Rows":[
{
"PKId":1234,
"OrderNumber":"XXXXXX97",
"Cancel":"Cancel",
"OrderDate":"Jul 11 2012 12:37PM",
"Warehouse":"",
"Bucket":"xxxxxxxx",
"StatusCode":"Shipped Complete",
"StatusLink":"View Info",
"TrackingNumber":"xxxxxxx",
"TransportCompany":"xxxxxxxx",
"Destination":"xxxxxxx",
"BucketId":110,
"ShippingEmail":"xxxxxxxx",
"OrderedBy":"xxxxxxxx",
"OrderItem":"xxxxxxx"
},
.... MORE DATA HERE ... 20 OBJECTS ALL-TOGETHER WITHIN Rows Array
{
"PKId":13434,
"OrderNumber":"XXXXXX97",
"Cancel":"Cancel",
"OrderDate":"Jul 11 2012 12:37PM",
"Warehouse":"",
"Bucket":"xxxxxxxx",
"StatusCode":"Shipped Complete",
"StatusLink":"View Info",
"TrackingNumber":"xxxxxxx",
"TransportCompany":"xxxxxxxx",
"Destination":"xxxxxxx",
"BucketId":110,
"ShippingEmail":"xxxxxxxx",
"OrderedBy":"xxxxxxxx",
"OrderItem":"xxxxxxx"
},
],
"UserData":null
}
Any suggestions?
Btw, the pagination and filtering was working just fine when I used loadonce: true and when I loaded all data at once, however, due to too many records I simply have to switch to server-side.
EDIT
I found the problem. First of all, I am sorry for not including the rest of the code.
You see, I also had loadComplete and that was causing the problem for me.
Code in the question will work, so I want to thank everyone for participating.
This is the loadComplete that caused the problem. Once I removed it it started paging properly.
loadComplete: function() {
setParamsOnComplete();
var myGrid = jQuery("#grid");
var ids = myGrid.getDataIDs();
for (var i = 0, idCount = ids.length; i < idCount; i++) {
jQuery("#"+ids[i]+" a",myGrid[0]).click(function(e) {
var hash=e.currentTarget.hash;// string like "#?id=0"
if (hash.substring(0,6) === "#S?id=") {
var id = hash.substring(6,hash.length);
var text = this.textContent || this.innerText;
dialog.dialog({ title: 'Status Information',
buttons:{ Ok: function() {
jQuery( this ).dialog("close");
}
},
open: function() {
jQuery('.ui-dialog-buttonpane').find('button:contains("Ok")').css('font-size', '10px');
}
});
dialog.dialog('open');
}
if (hash.substring(0,6) === "#C?id=") {
var id = hash.substring(6,hash.length);
var text = this.textContent || this.innerText;
var changed = false;
var additionalMesages = "";
jQuery.post("DataFetcher.asp", { 'action': "cancelOrder", 'id':id }, function(xml) {
changed = (xml === 'True');
additionalMesages = xml;
}).success(function(){
if (changed){
showDialogCustomTitle("Success", "You've successfully cancelled the order " + id + ".");
jQuery("#grid").setGridParam({datatype:'xml', page:1}).trigger('reloadGrid');
}else if (additionalMesages.split("_")[1] == "2"){
showDialogCustomTitle("Error", additionalMesages.split("_")[2]);
}else if (additionalMesages.split("_")[1] == "1"){
showDialogCustomTitle("Error", additionalMesages.split("_")[2]);
}
});
}
//e.preventDefault();
});
}
},
Next task for me is to perhaps figure out why loadComplete cause the problem.
EDIT 2
Found the first issue with loadComplete. I was too tired last night to notice it, but the leftover code from the period when this grid was populated with xml and paged on client side definitely caused the problems. Thank you all for involvement again. :)
jQuery("#grid").setGridParam({datatype:'xml', page:1}).trigger('reloadGrid');
- can u provide jsfiddle for this??? – Zaheer Ahmed Commented Apr 26, 2013 at 6:51
-
1
I suppose that the error should be in your server code. Probably the request to the server will be do sent to the server, but the server returns always the first page of data. Additionally you should fix the name of property which contain id of the row. Your JSON response contains no
Idproperty, butPKIdinstead. So you should changeid: "Id"toid: "PKId"inside ofjsonReader. I remend you additionally to remove unneededIdcolumn or renameIdcolumn toPKIdand addkey: trueproperty to the definition ofPKIdcolumn incolModel. – Oleg Commented Apr 26, 2013 at 7:36 - Developer Tools doesn't show any request to /GetAllOrders when I change page. That is not normal behavior correct? – iboros Commented Apr 26, 2013 at 12:44
-
In addition, changed to
id:"PKId"withinjsonReaderand addedkey: trueto the definition ofPKIdcolumn incolModel, however, I am still facing the same issue, but thanks for pointing that out. – iboros Commented Apr 26, 2013 at 13:42
1 Answer
Reset to default 5Since you have set loadonce:false, the request for paging and filtering try to get processed at the server side. Since that may not probably happening in your case, there will be no data to return to and set in the jqGrid.
If you are using loadonce:false and datatype:"json" jqGrid option then your server must implement the pagination of your grid. The server receives some parameters which is appended to the url in case of the 'GET' requests or sent in the HTTP body in case of "POST" requests namely : rows, page, sidx, sord.
For example if your table have a column with the index 'Col1' as the current sort column and rowNum: 20 then your url will be appended with baseUrl?rows=20&page=1&sidx=Col1&sord=asc. Your server side coding should modify your query for data so that it is to be having ORDER BY (Col1 datafield in the table) asc and rowNum from 1 to 20.
If you have done as stated above and it is not working, you should verify your server code.