jqgrid local on load, then remote

by octavient

HTML

<script src="http://cdn.octavient.net/jqgrid/grid.locale-en.js"></script>
<script src="http://cdn.octavient.net/jqgrid/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://cdn.octavient.net/jqgrid/ui.jqgrid.css">
<link rel="stylesheet" href="http://cdn.octavient.net/jqgrid/jquery-ui-1.9.2.custom.min.css">
<table id="tbl_test"></table>
<div id="pgr_test"></div>

JavaScript

var obj_initial_data = { "page": 1, "total": 2, "records": 9, "rows": [
	{ "id": "1", "make":"VW", "model":"Bus", "year":"1976", "color":"green" },
	{ "id": "2", "make":"Ford", "model":"F150", "year":"1984", "color":"brown" },
	{ "id": "3", "make":"Toyota", "model":"Camry", "year":"1989", "color":"maroon" },
	{ "id": "4", "make":"VW", "model":"Passat", "year":"2003", "color":"blue" },
	{ "id": "5", "make":"Toyota", "model":"Tacoma", "year":"1997", "color":"silver" }
]};

$(document).ready(function () {
	$("#tbl_test").jqGrid({
		colNames: ['id', 'Make', 'Model', 'Year', 'Color'],
		colModel: [
            {name: 'id', index: 'id', hidden:true},
            {name: 'make', index: 'make'},
            {name: 'model', index: 'model'},
            {name: 'year', index: 'year'},
            {name: 'color', index: 'color'}
            ],
		//url: '',
		pager: '#pgr_test', pgbuttons: true,
		datatype: 'local', data: obj_initial_data.rows,
        localReader: {
   			root: "rows",
   			page: "page",
   			total: "total",
   			records: "records",
   			repeatitems: false
    	},
		gridview: true,
		height: 180,
		//loadonce: true,
		autowidth:true,
		//rowNum: 5,
		viewrecords: true,
		gridComplete: function () {
			//after loading the local dataset, the grid should
            //be converted to a remote grid for pagination purposes
            //the idea is that the first page of the data will be local
            //then, once the local data is loaded, the pagination 
            //will go to the server (as will sorting, filtering, etc.)
            //the url below will serve up then next four records on paginate 
            //but note that it's just hard-coded, not from a 
            //database, so filter and sort will not work--just paginate
            $("#tbl_test").jqGrid('setGridParam', {datatype:'json', url:'http://cdn.octavient.net/jqgrid/test_server.aspx'});
		}
	});	
});