How to set Total Pages in JQGrid if I'm using server side paging? - jqgrid

Question

I'm new to JQGrid and learning the paging currently. I'm trying to implement server side paging.
Consider I have 45 records. Since, Server side returns the requested records of a specified page based on page size(say 10), my pager changes to 1 immediately after clicking next button. I'm not able to move on to further pages since the total page is 1 now. Total page is automatically getting calculated based on the records present. So how to manage the total pages value in this case?
$("#jqGridOutbox").jqGrid({
datatype: 'json',
mtype: 'POST',
colNames: ['Title', 'Submitted By', 'Assigned To', 'Submitted On', 'History', 'WorkFlow Name'],
colModel: [
{ name: 'TitleOut', index: 'Title', width: 173, sortable: true, search: true, formatter: ShowItemFormatterOutbox },
{ name: 'CreatedByOut', index: 'CreatedBy', width: 173, sortable: true, searchoptions: {} },
{ name: 'PendingOnOut', index: 'PendingOn', width: 173, sortable: true, searchoptions: {} },
{ name: 'CreatedOnOut', index: 'CreatedOn', width: 173, sortable: true, searchoptions: {} },
{ name: 'HistoryOut', index: 'History', width: 80, sortable: false, search: false, formatter: ViewHistoryFormatter },
{ name: 'WorkFlowNameOut', index: 'WorkFlowName', width: 170, sortable: true, search: true }
],
datatype: function (postData) { getDataOutBox(postData, OutMode, OutPageNumber); },
ajaxGridOptions: { contentType: "application/json" },
loadonce: 'false',
viewrecords: 'true',
width: 987,
viewsortcols: [true, 'vertical', true],
height: 250,
rowList: [2, 5, 10, 20, 30, 100],
hidegrid: 'false',
rowNum: 2,
autowidth: true,
gridview: true,
shrinkToFit: false,
showQuery: 'true',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "cell",
id: "Title",
userdata: "userdata",
repeatitems: true
},
gridComplete: function () {
$("#load_jqGridOutbox").hide();
$("tr.jqgrow:odd").css("background", "white");
$("tr.jqgrow:even").css("background", "#f7f7f7");
},
pager: '#jqGridOutboxPager',
pagerpos: 'center'
});
The function mapped to datatype is GetDataOutBox()
function getDataOutBox(pdata, mode, pageNumber) {
var params = new Object();
params.page = pdata.page;
params.pageSize = pdata.rows;
params.sortIndex = pdata.sidx;
params.sortDirection = pdata.sord;
params.Title = $("#gs_TitleOut").val() == undefined ? '' : $("#gs_TitleOut").val();
params.CreatedBy = $("#gs_CreatedByOut").val() == undefined ? '' : $("#gs_CreatedByOut").val();
params.PendingOn = $("#gs_PendingOnOut").val() == undefined ? '' : $("#gs_PendingOnOut").val();
params.CreatedOn = $("#gs_CreatedOnOut").val() == undefined ? '' : $("#gs_CreatedOnOut").val();
params.WorkFlowName = $("#gs_WorkFlowNameOut").val() == undefined ? '' : $("#gs_WorkFlowNameOut").val();
params.mode = mode;
params.pageNumber = pageNumber;
$("#load_jqGridOutbox").show();
$.ajax({
url: 'ClaySysWorkFlowDashBoard.aspx/GetOutboxData',
type: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(params),
dataType: "json",
success: function (data, st) {
if (st == "success") {
var grid = $("#jqGridOutbox")[0];
grid.addJSONData(data.d);
//$("#jqGridOutbox")[0].updatepager(false, true);
}
},
error: function () {
alert("An error has occured retrieving the data!");
}
});
}
The model which gets returned is
public class JQGrid
{
public class Row
{
public int id { get; set; }
public List<string> cell { get; set; }
public Row()
{
cell = new List<string>();
}
}
public int page { get; set; }
public int total { get; set; }
public int records { get; set; }
public List<Row> rows { get; set; }
public JQGrid()
{
rows = new List<Row>();
}
}
Based on the page number, I select only the respective set of 10 records. Thus after returning that, the total pages changes to 1.