问题
Take a look at what happens in my fiddle here: http://jsfiddle.net/tbH5H/
I'm trying to achieve proper progressive enhancement using jgrid. Everything works great, except I don't know how to give jqgrid the correct pager information on first load. My server side script dumps the JSON and a corresponding HTML table for SEO bots. But how can I also give the correct total page count to jqgrid on this first local load? The pager works correctly after a remote data pull as you can see in the fiddle.
HTML
<table id="grid">
<tr><th>ID</th><th>State</th></tr>
<tr><td>1</td><td>Alaska</td></tr>
<!-- etc...server side script dumps this out for SEO... -->
</table>
<div id="pager"></div>
JS
$("#grid").jqGrid({
datatype:'local',
// Server side script dumps this JSON out for first load only,
// other requests will come from remote source, see further down...
data: [{"id":1,"state":"Alabama"},
{"id":2,"state":"Alaska"},
{"id":3,"state":"Arizona"},
{"id":4,"state":"Arkansas"},
{"id":5,"state":"California"},
{"id":6,"state":"Colorado"},
{"id":7,"state":"Connecticut"},
{"id":8,"state":"Delaware"},
{"id":9,"state":"Florida"},
{"id":10,"state":"Georgia"}],
height: 250,
width: 450,
rowNum:10,
colNames:['ID','State'],
colModel:[
{name:'id', index:'id', width:50},
{name:'state', index:'state', width:100}
],
caption: "States of the USA",
pager: '#pager'
});
$("#grid").jqGrid('navGrid', '#pager',{edit: false, add: false, del: false, search: false, refresh: true});
// Convert the grid to read remotely, but don't trigger a unnecessary reload...
// (because queries are expensive! We shouldn't need to run them twice!)
$('#grid').jqGrid("setGridParam",{datatype:"json", mtype:"POST", url:"/some/url/here"});
$('#grid').jqGrid("setGridParam",{postData:data});
回答1:
Got it!
I needed to use localReader
. See new fiddle: http://jsfiddle.net/2UCk6/
localReader: {
// These values would be inserted on first page load from server-side script
page: function(obj) { return 1; },
total: function(obj) { return 5; },
records: function(obj) { return 50; }
},
回答2:
Your data should be in the following format:
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [{"id":1,"state":"Alabama"},
{"id":2,"state":"Alaska"},
{"id":3,"state":"Arizona"},
{"id":4,"state":"Arkansas"},
{"id":5,"state":"California"},
{"id":6,"state":"Colorado"},
{"id":7,"state":"Connecticut"},
{"id":8,"state":"Delaware"},
{"id":9,"state":"Florida"},
{"id":10,"state":"Georgia"}]
}
Where:
total = total pages for the query
page = current page of the query
records = total number of records for the query
rows = an array that contains the actual data
You need to have the json reader configured for the above some thing like given below:
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
...
},
...
More information can be found here with examples - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
Update
You can't have the feature when the datatype is local. When the data type is local the page/record etc are ignored by Jqgird. You should probably try virtual scrolling -> Go to Jqgrid Demo -> New in 3.7 -> Virtual Scrolling.
Or probably you should do a server call and return with the data you intend to use as local with the page/records etc?
来源:https://stackoverflow.com/questions/22824991/jqgrid-progressive-enhancement-successfully-progresses-from-html-to-local-js