Event Table (jQGrid version) - jQgrid init

event-page(snippet).jsp

$(function() {
	$("#grid").jqGrid({
	   	url:'${rootUrl}jqgrid/event/getall',
		datatype: 'json',
		mtype: 'POST',
	   	colNames:['Id',
	  		   	'Name', 
	  		   	'Description', 
	  		   	'Participants', 
	  		   	'Date'],
	   	colModel:[
	   		{name:'id',index:'id', width:55, editable:false},
	   		{name:'name',index:'name', width:90, editable:true},
	   		{name:'description',index:'description', width:90, editable:true},
	   		{name:'participants',index:'participants', editable:true},
	   		{name:'date',index:'date', width:90, editable:false, formatter:'date', formatoptions:{newformat: 'd/M/Y'}, editable:true}
	   	],
	   	rowNum:10,
	   	rowList:[10,20,30],
	   	autowidth: true,
		rownumbers: true,
	   	pager: '#pager',
	   	sortname: 'id',
	    viewrecords: true,
	    sortorder: "asc",
	    caption:"Events",
	    emptyrecords: "Empty records",
	    loadonce: false,
	    jsonReader : {
	        root: "rows",
	        page: "page",
	        total: "total",
	        records: "records",
	        repeatitems: false,
	        cell: "cell",
	        id: "id"
	    }
	});

	$("#grid").jqGrid('navGrid','#pager',
			{edit:false,add:false,del:false,search:true},
			{ },
	        { },
	        { }, 
	        { 
	        	sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
		        closeOnEscape: true, 
		        	multipleSearch: true, 
		         	closeAfterSearch: true }
	);

	$("#grid").navButtonAdd('#pager',
			{ 	caption:"Add", 
				buttonicon:"ui-icon-plus", 
				onClickButton: addRow,
				position: "last", 
				title:"", 
				cursor: "pointer"
			} 
	);

	$("#grid").navButtonAdd('#pager',
			{ 	caption:"Edit", 
				buttonicon:"ui-icon-pencil", 
				onClickButton: editRow,
				position: "last", 
				title:"", 
				cursor: "pointer"
			} 
	);

	$("#grid").navButtonAdd('#pager',
		{ 	caption:"Delete", 
			buttonicon:"ui-icon-trash", 
			onClickButton: deleteRow,
			position: "last", 
			title:"", 
			cursor: "pointer"
		} 
	);
});