Functionality

View Code

	

	<div id="page" data-role="page" data-theme="b">
    ...
		<table id='grid'></table>
		<div id='pager'></div>

		
		<script type='text/javascript'>
			jQuery('#grid').jqGrid({
				"hoverrows":false,
				"viewrecords":true,
				"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},
				"gridview":true,
				"loadonce":true,
				"url":"datav.json",
				"scrollPaging":true,
				"autowidth":true,
				"footerrow": true,
				"userDataOnFooter": true,
				"rowNum":20,
				"rowList" : [20,40,60],
				"sortname":"OrderID",
				"height":200,
				"datatype":"json",
				"colModel":[
					{"name":"OrderID","index":"OrderID","sorttype":"int","key":true,"width":80,"editable":true},
					{"name":"OrderDate","index":"OrderDate","sorttype":"datetime","formatter":"date","formatoptions":{"srcformat":"Y-m-d H:i:s","newformat":"m/d/Y"},"editable":true},
					{"name":"ShipName","index":"ShipName","sorttype":"string","editable":true},
					{"name":"Freight","index":"Freight","sorttype":"numeric","editable":true, "formatter": "number"}
				],
				"loadError":function(xhr,status, err){ 
					try {
						jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap,'
'+ xhr.responseText +'
', jQuery.jgrid.edit.bClose,
						{buttonalign:'right'});
					} catch(e) { 
						alert(xhr.responseText);} 
				},
				"pager":"#pager"
			});
			$("#grid").jqGrid('footerData', 'set', { "ShipName":"Total:"}, true);
		...
		</script>
	</div>