Wie füge ich Serverseite Paging für jqGrid wenn Daten aus einem separaten Ajax-Aufruf kommen? [Trirand jqGrid 4.6]

Question

ich eine jqGrid Struktur, die ähnlich wie gruppierten Kopfzeilen Config Beispiel in trirand 4.6 Demo jqGrid generieren muß Webseite.

In dieser hat ich einen separaten Ajax-Aufruf Daten zu erhalten und die Ajax-Aufrufe Aktionsmethode eine ASP MVC.

$.ajax({ 
url:'Controller/Action/ClientId?='+ id, 
method:'get', 
success:function(data){ 

var gridData = data; 

jQuery("#list483").jqGrid({ 
    datatype: "local", 
    height: 'auto', 
    rowNum: 30, 
    rowList: [10,20,30], 
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
    colModel:[ 
     {name:'id',index:'id', width:60, sorttype:"int"}, 
     {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"}, 
     {name:'name',index:'name', width:100, editable:true}, 
     {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true}, 
     {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},  
     {name:'total',index:'total', width:80,align:"right",sorttype:"float"},  
     {name:'note',index:'note', width:150, sortable:false}  
    ], 
    gridComplete:function(){ 


         var dataArray = $('#list483').jqGrid('getGridParam', 'data'); 

//do some processing here 

}, 
    pager: "#plist483", 
    viewrecords: true, 
    sortname: 'name', 
    grouping:true, 
    groupingView : { 
     groupField : ['name'], 
     groupColumnShow : [false], 
     groupText : ['<b>{0} - {1} Item(s)</b>'] 
    }, 
    caption: "Configure group header row" 
}); 


//load data to grid here 
for(var n=0;n<gridData .length;n++){ 
        jQuery("#list483").jqGrid('addRowData', n + 1, gridData [n]); 
       } 





} 


}) 

übernehmen die Daten, die von Ajax kommt als Array in Demo-Webseite als Paste gleiche ist hier unten:

[ 
     {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} , 
     {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"}, 
     {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"}, 
     {id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"}, 
     {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"}, 
     {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"}, 
     {id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"}, 
     {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"}, 
     {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
     {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
     {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
     {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
     {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
     {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
     {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
     {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
     {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
     {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
     {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, 
     {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, 
     {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} 
    ] 

die obige Datenarray 1000 Objekte hat Angenommen. so brauche ich Server Seite Paging. Aber wie füge ich serverseitigen Paging zu diesem externen ajax Anruf hinzu?

Sobald Server-Seite fügen Sie die folgende Paging arbeiten müssen:

1. Client-Seite Sortierung muss
2. RowList arbeiten müssen

dank

Answer 1

Das Hauptproblem arbeiten: Sie einige Dummy geschrieben Code, der wahrscheinlich keine Beziehung zu Ihrem echten Code hat. Es ist besser, den Code zu verwenden, der näher an Ihrem realen Code ist und nur die Daten zu Dummy-Daten im selben Format ersetzt.

Das meiste Problem: Sie verwenden den Datentyp: "local", aber schreiben Sie über die Anforderung, Server-Seiten-Paging zu implementieren. Es ist nicht konsequent. Außerdem füllen Sie das Raster mit addRowData in der Schleife aufgerufen. Es ist der schlimmste und langsamste Weg, den ich kenne. Wenn Sie datatype: "local" verwenden, sollten Sie data: gridData verwenden, um die Daten zu füllen. In der Art, wie Sie das Raster mit den Daten erstellen. jqGrid sortiert die Eingabedaten zunächst nach groupingView.groupField, dann nach sortname und zeigt die erste Seite der resultierenden Daten im Raster an.

Ich würde Ihnen empfehlen, gridview: true und autoencode: true in allen Ihren Grids zu verwenden, um eine bessere Leistung zu erzielen und die Daten korrekt anzuzeigen, wenn Sie reine Daten laden, die keine HTML-Fragmente enthalten. Sie empfehlen, nicht benötigte index Eigenschaften von colModel zu entfernen.

Ich empfehle Ihnen, Demos in JSFiddle zu veröffentlichen, die die Analyse Ihrer Probleme vereinfachen und die Reparatur von dort vorbereiten werden. Sie können den Echo-Dienst von JSFiddle zusätzlich verwenden (siehe here). Ich habe die Demo https://jsfiddle.net/OlegKi/mkgtuuzy/ für Sie, die fast den Code und die folgenden Optionen verwendet zusätzlich

sortname: 'id', 
gridview: true, 
autoencode: true, 

Ich würde Ihnen empfehlen dazu, verwenden Sie keine Retro-Version 4.6. Stattdessen können Sie free jqGrid 4.13.4 verwenden. Es ist der Fork, den ich seit Ende 2014 entwickle, nachdem ich den Haupt-jqGrid-Fork zu Guriddo jqGrid JS umbenannt habe (siehe the post), den Lizenzvertrag geändert und kommerziell gemacht habe (siehe Preise here). Free jqGrid 4.13.4 ist voll kompatibel mit den alten 4.6, aber es enthält viele Korrekturen, Leistungsverbesserungen und viele neue Funktionen, die in README für jede veröffentlichte Version und the wiki beschrieben sind. Ich empfehle Ihnen, the article und die Wiki-Artikel this one und this one zu lesen, die einige kleine, aber wichtige Verbesserungen beschrieben, die Sie in freiem jqGrid zusätzlich verwenden können.

Die Demo https://jsfiddle.net/OlegKi/mkgtuuzy/1/ verwendet den gleichen Code wie die vorherige Seite, enthält aber CSS Font Awesome 4.7, free jqGrid 4.13.4 und die Option iconSet: "fontAwesome".

Über die Anforderung von Server Seite Paging Sie sollten gut verstehen, dass 1000 Zeilen von Daten ist ein kleiner Datensatz für jqGrid, wenn Sie die Daten korrekt ausfüllen. The demo demonstriert die Leistung von freiem jqGrid mit 5000 Zeilen, 13 Spalten und 25 Zeilen pro Seite. Sie können die Leistung des lokalen Paging sehen, sortieren und filtern. Wenn Sie komprimierte (gziped) JSON-Daten vom Server laden und loadonce: true (und forceClientSorting: true im freien jqGrid) hinzufügen möchten, können Sie einfach alle Daten mit datatype: "json" direkt von der url laden. Sie sollten eine sehr gute Gesamtleistung haben.