ajaxpaginationjqgrid

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?


Solution

  • 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