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
EDITED LATER TO SHOW COMPLETE html page and json response
(Im now running this from a php/mysql backend).
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>
response on 1st load is
{"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"}]}
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"}]}
Best Answer
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:
If you would don't use
repeatitems: false
the code which fillsdata
parameter of jqGrid will be a little longer, but it will work.