jqGrid seems to display the first page only, and the server seems to be right.
Here's js:
$("#gpaTable").jqGrid({
datatype: "local",
pager: "#gpaPager",
viewrecords: true,
jsonReader: {
repeatitems: true,
id: "lineId",
cell: "cell",
root: "rows",
records: "records",
total: "pageTotal",
page: "pageId"
},
...
});
$("#gpaTable").jqGrid("navGrid", "#gpaPager", { edit: false, add: false, del: false });
$.ajax({
type: 'POST',
url: 'alarmInfo.aspx',
data: { lowestGpa: '1.7' },
dataType: "json",
success: function (data) {
var rows = data['rows'];
var cnt = rows.length;
for (var i = 0; i < cnt; ++i) {
$("#gpaTable").jqGrid("addRowData", i + 1, rows[i]["cell"]);
}
}
});
And the content returned from server (using ASP.NET) is:
{
"pageId": "1",
"pageTotal": "4",
"records": "100",
"rows": [{
"cell": {
"expectGpa": "2.0",
"failRestCnt": 1,
"failTotalCnt": 3,
"lastGpa": 0.0,
"lowScore": "",
"name": "name0063",
"noScore": 13,
"star": " ",
"studentId": "5090379063"
},
"lineId": 1
} // ...
]
}
pageTotal
, pageId
and records
seem not to be used. And from chrome console and firebug, I can't find parameters concerning paging sent to server.
What's the problem here?
It turns out that datatype: "local"
shouldn't be used for ajax to get data.
The right thing to do is:
url: "alarmInfo.aspx?request=BasicGpaInfo&lowestGpa=1.7",
datatype: "json",
Note that the json returned should be:
{
"total": "1",
"page": "1",
"records": "2",
"rows": [
{
"id": "1",
"cell": ["1", "1", "6", "0", "Credit Card", "Movie Hall Pass",
"250.0", "2011-03-16", "Entertainment" ]
},
...
]
}
instead of
{
"total": "1",
"page": "1",
"records": "2",
"rows": [
{
"id": "1",
"cell": {
"accountId": 1,
"userId": 1,
"transactionId": 6,
"subCatId": 0,
"accountName": "Credit Card",
"remarks": "Movie Hall Pass",
"amount": 250.0,
"transactionDate": "2011-03-16",
"subCatName": "Entertainment"
}
},
...
]
}
Reference here: jqGrid fetched json but has empty rows and no data