JQGrid Page # Not Incrementing

Question

I'm using SQL Server side paging to retrieve data for my JQGrid. There are ~15k rows being returned so I'm only grabbing a page at a time due to the JSON string size limitations. The SQL query works, but the page number being passed to my C# web service never increments past 2. It works perfectly on page 1 & 2. Presumably the grid needs the total number of records in the resultset, along with the calculated total number of pages. Easy to figure out, but how do I set this info in the grid? And will this solve the issue where the page number doesn't increment past 2?

Here's the code for my grid. UpdateShortCalls is a tad verbose as I "borrowed" it from another of my apps that has multiple case statements to handle add, edit, delete. Not including the C# as I know it works and returns data. Provided it gets the right page # passed.

function ShowStatuses() {
jQuery("#grdECHShortCalls").jqGrid('GridUnload');
jQuery("#grdECHShortCalls").jqGrid({
    jsonReader: {
        repeatitems: false,
        root: 'Table',
        page: function (obj) { return 1; },
        total: function (obj) { return 2; },
        records: function (obj) { return obj.ItemCount; },
        id: "0"
    },
    pgbuttons: true,
    recordtext: "Total: {2}",
    emptyrecords: "No records found",
    loadtext: "Loading...",
    pgtext: "",
    datatype: function () {
        UpdateShortCalls("getShortCalls");
    },
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    colNames: ['Location', 'Supervisor', 'Agent', 'ANSLOGIN', 'CallDate', 'CallId', 'ACD', 'TALKTIME' ],
    colModel: [
                { name: 'Location', index: 'Location' },
                { name: 'Supervisor', index: 'Supervisor', width: 150 },
                { name: 'Agent', index: 'Agent', width: 100 },
                { name: 'ANSLOGIN', index: 'ANSLOGIN', width: 100 },
                { name: 'CallDate', index: 'CallDate', width: 150 },
                { name: 'CallId', index: 'callid', width: 100 },
                { name: 'ACD', index: 'ACD', width: 120 },
                { name: 'TALKTIME', index: 'TALKTIME', width: 100 }
    ],
    rowNum: 100,
    height: "100%",
    autoWidth: true,
    rowList: [],
    pager: $('#shortCallPager'),
    toppager: true,
    sortname: 'Location',
    viewrecords: true,
    sortorder: 'asc',
    gridview: true,
    grouping: true,
    groupingView: {
        groupField: ['Location', 'Supervisor'],
        groupDataSorted: true,
        hideFirstGroupCol: true,
        groupCollapse: false,
        plusicon : "ui-icon-plus",
        minusicon : "ui-icon-minus"
    }
});

jQuery("#grdECHShortCalls").jqGrid({ pgbuttons: true, recordtext: '' });
jQuery('#grdECHShortCalls').jqGrid('gridResize');
}

function UpdateShortCalls(m, args) {
var data = "";
var method = "";
var func = "";
switch (m) {
    case "getShortCalls":
        method = "GetShortCallDetails";
        var postdata = $("#grdECHShortCalls").jqGrid('getGridParam', 'postData');
        data = '{ sortidx: "' + postdata.sidx +
                '", sortorder: "' + postdata.sord +
                '", page: "' + postdata.page +
                '", rows: "' + postdata.rows +
                '", issearch: "' + postdata._search +
                '", searchfield: "' + postdata.searchField +
                '", searchval: "' + postdata.searchString +
                '", searchops: "' + postdata.searchOper + '"}';
        var args = [];
        args.push(postdata._search);
        func = "getShortCalls";
        break;
    default:
        return;
}
utl.ajax(srvurl + method, data, func, args);

}

Answer 1

Can you post server side? Actially in returning data, if you use delault jgqrid mapping, should have field total, that containg integer value of total rows.

Also, can be that this answer by @Oleg can help you with your problem.

Answer 2

I figured it out! For anyone else having a similar problem... I return a second table from my SQL query with the current page number, total number of pages, and the total record count. Include it as another table in the JSON string. Modified my JavaScript function creating the JQGrid - specifically the jsonReader: section to display these values. Now that the grid knows how many records there are paging advances as expected. Finally got to pages past #2!

function ShowStatuses() {
    jQuery("#grdECHShortCalls").jqGrid('GridUnload');
    jQuery("#grdECHShortCalls").jqGrid({
        jsonReader: {
            repeatitems: false,
            root: 'Table',
            total: function (d) { return d.Table1[0].TotalPgs; },
            records: function (d) { return d.Table1[0].Cnt; },
            page: function (d) { return d.Table1[0].Page; },
            id: "0"
        },
        pgbuttons: true,
        emptyrecords: "No records found",
        loadtext: "Loading...",
        datatype: function () {
            UpdateShortCalls("getShortCalls");
        },
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        colNames: ['Location', 'Supervisor', 'Agent', 'ANSLOGIN', 'CallDate', 'CallId', 'ACD', 'TALKTIME' ],
        colModel: [
                { name: 'Location', index: 'Location' },
                { name: 'Supervisor', index: 'Supervisor', width: 150 },
                { name: 'Agent', index: 'Agent', width: 100 },
                { name: 'ANSLOGIN', index: 'ANSLOGIN', width: 100 },
                { name: 'CallDate', index: 'CallDate', width: 150 },
                { name: 'CallId', index: 'callid', width: 100 },
                { name: 'ACD', index: 'ACD', width: 120 },
                { name: 'TALKTIME', index: 'TALKTIME', width: 100 }
        ],
        rowNum: 100,
        height: "100%",
        autoWidth: true,
        rowList: [],
        pager: $('#shortCallPager'),
        toppager: true,
        sortname: 'Location',
        viewrecords: true,
        sortorder: 'asc',
        gridview: true,
        grouping: true,
        groupingView: {
            groupField: ['Location', 'Supervisor'],
            groupDataSorted: true,
            hideFirstGroupCol: true,
            groupCollapse: false,
            plusicon : "ui-icon-plus",
            minusicon : "ui-icon-minus"
        }
    });

    //jQuery("#grdECHShortCalls").jqGrid({ pgbuttons: true, recordtext: '' });
    jQuery('#grdECHShortCalls').jqGrid('gridResize');
}