jqgrid Pagina 1 di x cercapersone

Sto cercando di capire come utilizzare la funzionalità di paging di jqGrid. Attualmente sono bloccato a pagina 1 di 4. Non importa se premo il pulsante Avanti o no. Rimane solo su 1.

Sto usando ASP.Net con un webservice per popolare i miei dati JSON. Come catturare l’evento dal client per popolare la proprietà sul webservice per riportare il valore corretto?

Qualsiasi aiuto è apprezzato.

Se si preme il pulsante “Avanti”, una nuova richiesta verrà inviata al server. La richiesta conterrà page=2 e, ad esempio, rows=10 parametri come parte dell’URL (se si desidera ottenere le 10 righe successive della seconda pagina).

Il tuo codice server dovrebbe leggere questi parametri e inviare indietro le righe di dati corrispondenti. I dati JSON inviati dal server dovrebbero essere come i seguenti

 { "total": "5", "page": "2", "records": "55", "rows" : [ {"id" :"21", "cell" :["cell11", "cell12", "cell13"]}, {"id" :"22", "cell" :["cell21", "cell22", "cell23"]}, ... {"id" :"30", "cell" :["cell31", "cell32", "cell33"]}, ] } 

(vedi http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data ). Quindi i dati devono contenere il valore corretto per la page (pagina = 2). In generale è ansible, ora che hai meno dati come prima e restituisci il numero di pagina 1 sulla richiesta per ottenere il numero di pagina 2.

Quindi suggerisco che attualmente il tuo codice server non restituisca il valore corretto della page nell’output.

AGGIORNATO : OK Jeff. Continuo la mia risposta in jqgrid setGridParam datatype: local e post come viene promesso un codice come fanno il paging lato server, l’ordinamento e la ricerca (o la ricerca avanzata).

Prima di tutto nell’esempio non realizzerò realmente l’ordinamento e la ricerca e simulerò solo il paging in cui hai problemi ora. Le vere paging, ordinamento e ricerca dovrebbero essere implementate come le istruzioni SELECT corrispondenti al database SQL in cui i dati esistono. L’ordinamento segue ORDER BY , la ricerca su WHERE e il paging su costruzioni come TOP(x) , TOP(x) con LEFT OUTER JOIN o l’utilizzo dei ROW_NUMBER() OVER(...) . Ma questi non sono l’argomento della tua domanda. Quindi riduco tutto alla semplice simulazione di paging dei dati.

Comincio con il codice del metodo Web ASMX:

 public JqGridData TestMethod (int page, int rows, string sidx, string sord, bool _search, string searchField, string searchOper, string searchString) { // for advance search use "string filters" instead of the last three parameters int recordsCount = 205; int startIndex = (page - 1) * rows; int endIndex = (startIndex + rows < recordsCount) ? startIndex + rows : recordsCount; List gridRows = new List (rows); for (int i = startIndex; i < endIndex; i++) { gridRows.Add (new TableRow () { id = i, cell = new List (2) { string.Format("Name{0}", i), string.Format("Title{0}", i) } }); } return new JqGridData () { total = (recordsCount + rows - 1) / rows, page = page, records = recordsCount, rows = gridRows }; } 

dove classi JqGridData e TableRow sono definite come segue:

 public class TableRow { public int id { get; set; } public List cell { get; set; } } public class JqGridData { public int total { get; set; } public int page { get; set; } public int records { get; set; } public List rows { get; set; } } 

TestMethod qualsiasi verifica dei parametri di input di TestMethod per rendere l’esempio di codice più leggibile.

Ora il codice cliente:

 $("#list").jqGrid({ url: './MyTestWS.asmx/TestMethod', datatype: 'json', mtype: 'POST', ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, serializeGridData: function (postData) { if (postData.searchField === undefined) postData.searchField = null; if (postData.searchString === undefined) postData.searchString = null; if (postData.searchOper === undefined) postData.searchOper = null; //if (postData.filters === undefined) postData.filters = null; return JSON.stringify(postData); }, jsonReader: { root: function (obj) { return obj.d.rows; }, page: function (obj) { return obj.d.page; }, total: function (obj) { return obj.d.total; }, records: function (obj) { return obj.d.records; } }, // you can also use following more simple form of jsonReader instead: // jsonReader: { root: "d.rows", page: "d.page", total: "d.total", // records: "d.records", id: "d.names" } colModel: [ { name: 'name', label: 'Name', width: 250 }, { name: 'title', label: 'Title', width: 250 } ], rowNum: 10, rowList: [10, 20, 300], sortname: 'name', sortorder: "asc", pager: "#pager", viewrecords: true, gridview: true, rownumbers: true, height: 250, caption: 'My first grid' }).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true}); // {}, // use default settings for edit // {}, // use default settings for add // {}, // delete instead that del:false we need this // {multipleSearch : true} // enable the advanced searching // ); 

Nel codice uso la stessa tecnica come in jqgrid setGridParam datatype: local ma il codice della funzione serializeGridData è un po ‘diverso. Poiché utilizziamo il metodo POST e non GET per ottenere i dati dal server, tutti i parametri di input del metodo web devono essere sempre impostati . Dall’altro lato jqGrid non imposta sempre parametri searchField , searchOper e searchOper , ma solo se _search=true . Ad esempio al primo caricamento di jqGrid, _search=false e searchField , searchOper e searchOper non sono definiti nel postData . Per risolvere il problema inizializziamo i parametri non definiti con null .

Per implementare l’ordinamento è necessario utilizzare i sidx (indice di ordinamento) e sord (direzione di ordinamento: "asc" o "desc" ).

Per implementare la ricerca è necessario utilizzare altri parametri _search , searchField , searchOper , searchOper .

Durante la ricerca avanzata invece dei searchField , searchField , searchOper , è necessario utilizzare i filters parametri (vedere le righe commentate). I dati devono essere decodificati rispetto a un deserializzatore JSON. Quindi deve essere impostato multipleSearch : true in jqgrid. La funzione serializeGridData deve essere sostituita con

 serializeGridData: function (postData) { if (postData.filters === undefined) postData.filters = null; return JSON.stringify(postData); } 

e il prototipo del metodo web dovrebbe essere cambiato in

 public JqGridData TestMethod (int page, int rows, string sidx, string sord, bool _search, string filters) 

per decodificare i filters parametri si può usare un codice così semplice:

 if (_search && !String.IsNullOrEmpty (filters)) { JavaScriptSerializer serializer = new JavaScriptSerializer (); jqGridSearchFilter searchFilter = serializer.Deserialize (filters); // use the searchFilter here } 

dove la class jqGridSearchFilter può essere definita come segue:

 public class jqGridSearchFilterItem { public string field { get; set; } public string op { get; set; } public string data { get; set; } } public class jqGridSearchFilter { public string groupOp { get; set; } public List rules { get; set; } } 

Spero che questa informazione sia sufficiente per implementare qualsiasi tipo di utilizzo di jqGrid con il metodo Web ASMX.

Ho usato qui i dati più semplici inviati dal server al client con id aggiuntivo al di fuori dei dati principali. Se una delle colonne che hai nella tabella è l’ id , puoi ridurre un po ‘i dati inviati al server. Vedere Jqgrid 3.7 non mostra righe in Internet Explorer per maggiori dettagli.

Ok, rispondo a questo mentre ho preso quello che Oleg aveva detto sopra, ma ho capito esattamente cosa intendeva.

La mia chiamata .ajax è racchiusa in una funzione che trasmette i dati postdatati come parametro. Non sono riuscito a trovare alcuna documentazione su quel parametro, ma ho pensato che forse era lì che il valore della pagina era contenuto. Come puoi vedere ho fatto un avviso con postdata.page e basso ed ecco che ho ottenuto un valore (basato sul clic del pulsante successivo).

Così ho creato un parametro nel mio webservice chiamato page (integer).

Come nota a margine, si passa un valore intero da jQuery al proprio webservice ASP.Net come questo:

 data: "{'page':'" + postdata.page + "'}" 

Di seguito è riportata la funzione completa:

 function processrequest(postdata) { alert(postdata.page); $(".loading").show(); $.ajax({ type: "POST", data: "{'page':'" + postdata.page + "'}", datatype: "json", url: "../webServices/myTestWS.asmx/testMethod", contentType: "application/json; charset-utf-8", complete: function (jsondata, stat) { if (stat == "success") { var thegrid = jQuery("#list")[0]; var jsonObject = (eval("(" + jsondata.responseText + ")")); thegrid.addJSONData(jsonObject.d); $(".loading").hide(); } else { $(".loading").hide(); alert("Error with AJAX callback"); } } }); 

}