jqgrid客户端侧排序与服务器端分页 – 数据消失

它在jqgrid文档中声明下面的代码应允许使用服务器端分页进行本地排序; 网格数据在分页时消失; 之前已经问过这个问题没有明确的答案 – 使用loadonce的建议：true意味着关闭分页 – 我需要分页

稍后编辑完成完整的html页面和json响应（我现在从php / mysql后端运行它）。

我的完整HTML页面

        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"); } }); });     
   

第一次负载的响应是

 {"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"}]} 

第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"}]} 

Answer 1

首先，我想重复一遍，我不建议你使用本地排序和服务器端分页。 我发现用户可能会错误地解释排序结果。

但是，如果您的客户同意具有本地排序和服务器端分页组合的限制，并且您确实需要实现该限制，我可以建议您使用以下解决方案：

 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); } } 

如果你不使用repeatitems: false ，填充jqGrid的data参数的代码将会更长一些，但它会起作用。

Answer 2

上面的解决方案工作正常，除非我们在网格的最后一页，如果我在最后一页显示3行，尽管页面可以容纳5行。

现在，如果我尝试进行客户端排序，最后一页将填充2个额外的行，总共5行将被排序。 我会说，可能是最后提取的记录存储在缓冲区中，所以这种情况正在发生。 为解决这个问题，onPagination，在将网格设为“json”之前清除网格，就像

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

并在源代码中注释行
$tprecords = 0;$tppage=1;$tplastpage=0; 在clearGridData函数中，以便下一个分页将正常工作。