jqGrid Paginierung funktioniert nicht mit json-Datentyp
Ich kann nicht scheinen, um jqGrid Paginierung arbeiten. Es ist nicht eine Anforderung, wenn ich auf weiter/zurück/neu laden oder wenn ich versuche zu filter. Sobald ich auf eine dieser Schaltflächen, werden alle Datensätze verschwinden.
Dies ist die erste Anforderung, die versendet wird, so können Sie sehen, dass alle diese Parameter werden übergeben.
https://www.xxxxxxx.com/getallorders?contactId=333&bucketId=444&_search=false&nd=1366982305621&rows=20&page=1&sidx=PKId&sord=desc
Dieser gibt die richtige Anzahl der Datensätze, und wenn ich manuell ausführen, und übergeben Sie in sagen wir mal page=2 ich habe die richtigen stellen zurück. Das problem scheint zu sein, dass die Anfrage nicht gemacht.
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"});
Dies ist die json-Antwort, die ich von dem server beim erstmaligen laden.
{
"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
}
Irgendwelche Vorschläge?
Btw, die Paginierung und Filterung war gut arbeiten, wenn ich loadonce: true
und wenn ich geladen alle Daten auf einmal, jedoch durch zu viele Datensätze habe ich einfach die Schalter auf server-Seite.
BEARBEITEN
Ich habe das problem gefunden. Zunächst, ich bin sorry für die nicht wie der rest des Codes.
Sehen Sie, ich hatte auch loadComplete
- und das war das problem verursacht für mich.
Code in der Frage der Arbeit, so ich danke allen für die Teilnahme.
Dies ist die loadComplete
, die das problem verursacht. Einmal habe ich es entfernt, es begann paging richtig.
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();
});
}
},
Nächste Aufgabe für mich ist, um vielleicht herauszufinden, warum loadComplete
das problem verursachen.
EDIT 2
Fand die erste Ausgabe mit loadComplete
. Ich war zu müde, Letzte Nacht, um es zu bemerken, aber der übrig gebliebene code-aus der Zeit, als sich das Starterfeld war bestückt mit xml-und ausgelagert auf der client-Seite definitiv die Probleme verursacht. Danke Euch allen für die Beteiligung wieder. 🙂
jQuery("#grid").setGridParam({datatype:'xml', page:1}).trigger('reloadGrid');
- kann u geben jsfiddle für diese???
- Ich vermute, dass der Fehler sollte in der server-code. Wohl die Anfrage an den server wird sein tun an den server gesendet, aber der server gibt immer die erste Seite der Daten. Zusätzlich sollte man sich den Namen der Eigenschaft enthalten, die id der Zeile. Ihre JSON-Antwort enthält keine
Id
Eigenschaft, aberPKId
statt. So sollten Sie ändernid: "Id"
zuid: "PKId"
innerhalb vonjsonReader
. Ich empfehle Ihnen, zusätzlich zu entfernen Sie nicht benötigteId
Spalte oder umbenennenId
SpaltePKId
und fügen Siekey: true
Eigenschaft der definition vonPKId
Spalte incolModel
. - Entwickler-Tools nicht zeigen, jede Anfrage zu /GetAllOrders, wenn ich die Seite wechseln. Das ist kein normales Verhalten korrekt?
- Darüber hinaus verändert
id:"PKId"
innerhalbjsonReader
und Hinzugefügtkey: true
auf die definition vonPKId
Spalte incolModel
aber ich bin immer noch vor dem gleichen Problem, aber danke für den Hinweis.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Da Sie festgelegt haben
loadonce:false
die Anfrage für paging und filtern versuchen Sie, verarbeitet der server-Seite. Da kann Sie wohl nicht passiert in deinem Fall, es werden keine Daten zurück an und in das jqGrid.Wenn Sie
loadonce:false
unddatatype:"json"
jqGrid option, dann wird Ihr server implementieren muss, die Paginierung des Rasters. Der server bekommt einige Parameter an die url angehängt, im Falle des'GET'
Anfragen oder gesendet werden, in den HTTP-body im Fall von"POST"
Anfragen nämlich : Zeilen, Seite, sidx, sord.Zum Beispiel, wenn Ihre Tabelle eine Spalte mit dem index
'Col1'
als die aktuelle Sortierspalte und -rowNum: 20
dann die url angehängt werden, mitbaseUrl?rows=20&page=1&sidx=Col1&sord=asc
. Ihre server-side-Programmierung sollte die Abfrage so ändern, für die Daten zu sein mitORDER BY (Col1 datafield in the table) asc
undrowNum from 1 to 20
.Wenn du getan hast, wie oben angegeben, und es ist nicht funktioniert, sollten Sie überprüfen Sie Ihre server-code.