Selección del lado del cliente jqgrid con paginación del lado del servidor – desaparece la información

indica en la documentación jqgrid que el código siguiente debe permitir la clasificación local con paginación del lado del servidor; los datos de la cuadrícula desaparecen en la búsqueda; esta pregunta se ha hecho antes sin una respuesta clara: sugerencias para usar loadonce: true significa que la paginación está desactivada, necesito paginación

EDITADO MÁS TARDE PARA MOSTRAR la página html y la respuesta json (ahora estoy ejecutando esto desde un backend php / mysql).

mi página html completa

   JQGrid Test     html, body { margin: 0; padding: 0; font-size: 90%; }        $(function() { $('#table').jqGrid({ jsonReader : { repeatitems: false, cell:"", id:"0" }, height:'auto', url:'/jqgrid/orderdetails.php', postData:{test:'value'}, datatype: 'json', mtype: 'POST', rownumbers:true, rownumWidth:35, colNames:['OrderID','UnitPrice','Quantity','Discount','ProductName'], colModel :[ {name:'OrderID', index:'OrderID',search:false,sorttype:'integer'}, {name:'UnitPrice', index:'UnitPrice',editable:true,sorttype:'float'}, {name:'Quantity', index:'Quantity',sorttype:'int'}, {name:'Discount', index:'Discount',sorttype:'int'}, {name:'ProductName', index:'ProductName'} ], sortname: 'OrderID ', rowNum:5, sortorder: 'asc', width:'100%', height:'200', viewrecords: true, gridview: true, caption: 'NorthWind Orders', scrollOffset:18, multiselect:true, pager:'pager' ,cellEdit:true, cellsubmit:'clientArray', afterSaveCell:function(rowid, cellname, value, iRow, iCol){ }, onPaging: function() { $("#table").setGridParam({datatype:'json'}).trigger("reloadGrid"); }, loadComplete: function (data) { $("#table").setGridParam({datatype:'local'}).trigger("reloadGrid"); } }); });    

la respuesta en la primera carga es

 {"page":"1","total":431,"records":2155,"rows":[{"OrderID":"1024811","UnitPrice":"14.0000","Quantity":"12","Discount":"0"},{"OrderID":"1024842","UnitPrice":"9.8000","Quantity":"10","Discount":"0"},{"OrderID":"1024872","UnitPrice":"34.8000","Quantity":"5","Discount":"0"},{"OrderID":"1024914","UnitPrice":"18.6000","Quantity":"9","Discount":"0"},{"OrderID":"1024951","UnitPrice":"42.4000","Quantity":"40","Discount":"0"}]} 

respuesta de la página 2:

 {"page":"2","total":431,"records":2155,"rows":[{"OrderID":"1025041","UnitPrice":"7.7000","Quantity":"10","Discount":"0"},{"OrderID":"1025051","UnitPrice":"42.4000","Quantity":"35","Discount":"0.15"},{"OrderID":"1025065","UnitPrice":"16.8000","Quantity":"15","Discount":"0.15"},{"OrderID":"1025122","UnitPrice":"16.8000","Quantity":"6","Discount":"0.05"},{"OrderID":"1025157","UnitPrice":"15.6000","Quantity":"15","Discount":"0.05"}]} 

En primer lugar, quiero repetir que no te recomiendo usar la ordenación local y la paginación del lado del servidor. Encuentro que el usuario puede interpretar mal el resultado de la clasificación.

Sin embargo, si su cliente está de acuerdo con la restricción que tiene la combinación de ordenación local y la paginación del lado del servidor y si realmente necesita implementar eso, puedo sugerirle la siguiente solución:

 onPaging: function() { $(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid"); }, loadComplete: function (data) { var $this = $(this); if ($this.jqGrid('getGridParam', 'datatype') === 'json') { // because one use repeatitems: false option and uses no // jsonmap in the colModel the setting of data parameter // is very easy. We can set data parameter to data.rows: $this.jqGrid('setGridParam', { datatype: 'local', data: data.rows, pageServer: data.page, recordsServer: data.records, lastpageServer: data.total }); // because we changed the value of the data parameter // we need update internal _index parameter: this.refreshIndex(); if ($this.jqGrid('getGridParam', 'sortname') !== '') { // we need reload grid only if we use sortname parameter, // but the server return unsorted data $this.triggerHandler('reloadGrid'); } } else { $this.jqGrid('setGridParam', { page: $this.jqGrid('getGridParam', 'pageServer'), records: $this.jqGrid('getGridParam', 'recordsServer'), lastpage: $this.jqGrid('getGridParam', 'lastpageServer') }); this.updatepager(false, true); } } 

Si no utilizas repeatitems: false el código que llena data parámetro de data de jqGrid será un poco más largo, pero funcionará.

La solución anterior funciona bien, excepto en el caso en que en si estamos en la última página de la cuadrícula, digamos que tengo 3 filas que se muestran en la última página aunque la página puede acomodar 5 filas.

Ahora bien, si trato de ordenar por el lado del cliente, la última página se completará con 2 filas adicionales y se ordenarán las 5 filas totales. Yo diría que puede ser que los últimos registros obtenidos se almacenen en el búfer para que esto ocurra. Como solución para esto, enPagination, borre la cuadrícula antes de hacer la cuadrícula como “json”, como

clickOnPagination = function() { $(this).jqGrid("clearGridData"); $(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid"); }

y en el código fuente comenta las líneas
$tprecords = 0;$tppage=1;$tplastpage=0; en la función clearGridData para que la siguiente paginación funcione correctamente.