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"}]}
See Question&Answers more detail:
os 
