.I’d like for a jqgrid to be populated on page load with a local json data set. Then, after it’s loaded (gridComplete?), I’d like to switch it to be a normal, remote grid. My example dataset has 9 records, and the page will be delivered to the client with the first 5 records. After the grid is loaded, I’d like to change the grid params so that all subsequent pagination, sort, and filter commands go to the server.
Here’s my jsfiddle: http://jsfiddle.net/octavient/v6m27mhw/6/
Below is the code, to give you an idea of what I’m hoping to achieve. The first problem, at the outset, is that the grid seems to think there are only five records, and so doesn’t give me the option to paginate.
(I understand that with some grid params, setting them after the grid is loaded requires reloading the grid, but that doesn’t make sense in this context.)
Any ideas on how to achieve this?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
//first five records are local 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'}); } }); }); |
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top
