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",
			"cmTemplate": {"sortable":false}
		});
		$("#grid").jqGrid('footerData', 'set', { "ShipName":"Total:"}, true);
		...
		</script>
	</div>