CODEWITHSUNDEEP
ajaxpaginationjqgrid
Ovilia
Ovilia

Reputation: 7310

jqGrid paging doesn't work

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?

Upvotes: 1

Views: 1848

Answers (1)

Ovilia
Ovilia

Reputation: 7310

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

Upvotes: 1

Related Questions