jqgrid 客户端排序与服务器端分页 - 数据消失 [英] jqgrid client side sorting with server side paging - data disappears
问题描述
它在 jqgrid 文档中指出，下面的代码应该允许使用服务器端分页进行本地排序；分页时网格数据消失；之前有人问过这个问题，但没有明确答案 - 建议使用 loadonce:true 表示分页已关闭 - 我需要分页
it states in jqgrid documentation that the code below should allow local sorting with server side paging; the grid data disappears on paging; this question has been asked before with no clear answer - suggestions to use loadonce:true means that paging is turned off - I need paging
稍后编辑以显示完整的 html 页面和 json 响应(我现在从 php/mysql 后端运行它).
EDITED LATER TO SHOW COMPLETE html page and json response (Im now running this from a php/mysql backend).
我的完整 html 页面
my full html page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQGrid Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../dojoproject/jquery-ui-1.8.16.custom/css/start/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" type="text/css" href="jquery.jqGrid-4.3.1/css/ui.jqgrid.css">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 90%;
}
</style>
<script type="text/javascript" src="../dojoproject/jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="../dojoproject/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js" ></script>
<script type="text/javascript" src="jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js" ></script>
<script type="text/javascript" src="jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js" ></script>
<script type="text/javascript" src="../dojoproject/jqGrid-4.1.2/js/JSON-js/json2.js" ></script>
<script>
$(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");
}
});
});
</script>
</head>
<body>
<table id='table'></table>
<div id='pager'></div>
</body>
</html>
第一次加载的响应是
{"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 页的响应:
response from page 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"}]}
推荐答案
首先我要重申的是，我不建议您使用本地排序和服务器端分页.我发现用户可能会错误地解释排序的结果.
First of all I want repeat that I don't recommend you to use local sorting and the server side paging. I find that the user can wrong interpret the result of sorting.
然而，如果您的客户同意结合本地排序和服务器端分页的限制，并且如果您确实需要实施该限制，我可以建议您采用以下解决方案:
Nevertheless, if your customer agree with restriction which have the combination of local sorting and the server side paging and if you really need to implement that, I can suggest you the following solution:
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参数的代码会有点长，但它会起作用.
If you would don't use repeatitems: false the code which fills data parameter of jqGrid will be a little longer, but it will work.
这篇关于jqgrid 客户端排序与服务器端分页 - 数据消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
