Basic jqgrid

The Scripts

                <script src="//bugwoodcloud.org/CDN/jqueryui/1.10.4/js/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
				<link rel="stylesheet" href="//bugwoodcloud.org/CDN/jqueryui/1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css">
				<link rel="stylesheet" href="//bugwoodcloud.org/CDN/jqgrid/4.6.0/css/ui.jqgrid.css">
				<script src="//bugwoodcloud.org/CDN/jqgrid/4.6.0/js/jquery.jqGrid.min.js" type="text/javascript"></script>
				<script src="//bugwoodcloud.org/CDN/jqgrid/4.6.0/js/i18n/grid.locale-en.js" type="text/javascript"></script>
				<script src="//bugwoodcloud.org/CDN/jqgrid/4.6.0/js/jquery.jqGrid.min.js" type="text/javascript"></script>
				<script src="//bugwoodcloud.org/CDN/jqgrid/4.6.0/js/i18n/grid.locale-en.js" type="text/javascript"></script>

The HTML

                <table id="jqgridExample"></table>
                <div id="pager"></div>

The Javascript/jQuery to make it work

 	
                $('#jqgridExample').jqGrid({
					url: 'https://api.bugwood.org/rest/api/resource.json?system=5&fmt=jqgrid',
					datatype: 'json',
					jsonReader : { repeatitems: false, id: 'id' },
					colNames: [ 'ID', 'Resource Name', 'Contact ', 'Number of versions'],
					colModel: [
						{ name: 'id', index: 'id', width: 2 },
						{ name: 'ResourceName', index: 'ResourceName', width: 2  },
						{ name: 'contact', index: 'contact', width: 2   },
						{ name: 'numberofversions', index: 'numberofversions', width: 2 }
						
					],
					sortname:'id',
					scroll: 1,
					autowidth:true,
					hoverrows:false,
					height: '600',
					rowNum: 50,
					rowList: [ 50, 100, 250, 500 ],
					viewrecords: true,
					pager: '#pager',
				}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: false, refresh: false})
				.jqGrid('filterToolbar',{searchOnEnter:false});