Jqgrid pager issue. Total record and next prev dont work.

See more:

ASP.NET

JQGrid

I have implemented server side paging with client side sorting. Everything works fine but Total record is not setting properly in pager and next prev button dont work.

next, prev button is not active. I get data from database according to page.

For ex : if i am on 1st page so i get 10 record to display in grid and so on if user click next to go next page it will show next 10 record from db.

But problem is next button is not visible also total is also not showing.

Following are my json .

{"total":10,"page":1,"records":100,"rows":[

{"id":0,"cell":["1","false","1","Module 1 - Title"]},
{"id":1,"cell":["2","false","1","Introduction"]},
{"id":2,"cell":["3","false","1","What is Asbestos?"]},
{"id":3,"cell":["4","false","1","Asbestos in Construction"]},
{"id":4,"cell":["5","false","1","Asbestos Materials"]},
{"id":5,"cell":["6","false","1","Health Hazards"]},
{"id":6,"cell":["7","false","1","Asbestosis"]},
{"id":7,"cell":["8","false","1","Asbestos Regulations"]},
{"id":8,"cell":["9","false","1","Ontario Regulation 278/05"]},
{"id":9,"cell":["10","false","1","Asbestos Management Program"]}
]
}

and following are my method to get json to grid. GRid is bindind properly

function fn_getData() {
  $("#gvStock").jqGrid({
    url: 'jqgrid_server_side_paging.aspx?a=1',
    datatype: "json",
    loadError: function (xhr, status, error) {
      alert('load error: ' + error);
    },
    colNames: ['idtrainingeventresistrationresult', 'course_status', 'course_attempts', 'title', 'Edit', 'Delete'],
    colModel: [
                    { name: 'idtrainingeventresistrationresult', index: 'idtrainingeventresistrationresult', align: 'center', sortable: true, sorttype: 'integer' },
                { name: 'course_status', index: 'course_status', align: 'left', sortable: true, sorttype: 'text' },
                { name: 'course_attempts', index: 'course_attempts', align: 'center', sortable: true, sorttype: 'integer' },
                { name: 'title', index: 'title', align: 'center', sortable: true, sorttype: 'text' },
                { formatter: fn_Edit, align: 'left', sortable: false },
                { formatter: fn_Delete, align: 'left', sortable: false },
    ],
    loadonce: true,
    treeGridModel: 'adjacency',
    mtype: 'GET',
    loadonce: true,
    rowList: [10, 20, 30, 40, 50],
    pager: '#jQGridPager1',
    pginput: true,
    height: "auto",
    width: 930,
    rownumWidth: 20,
    rowNum: 10,
    shrinkToFit: true,
    rownumbers: false,
    viewrecords: true,
    caption: "Server side paging with client side sorting",
    gridComplete: function () {
      var recs = $("#gvStock").getGridParam("records");
      if (recs == 0 || recs == undefined) {
        $("#nd1").show();
      }
      else {
        $("#nd1").hide();
      }
    },

    loadComplete: function () {
      $("#gvStock").setGridParam({ datatype: 'local' });
      $("th.ui-th-column").css("font", "bold"); $("tr.jqgrow:odd").css("background", "#E7E7FF");
    },

    jsonReader: { repeatitems: true, root: "rows", page: "page", total: "total", records: "records", cell: "cell", id: "id", },

    onPaging : function(which_button) {
      $("#gvStock").setGridParam({ datatype: 'json' });
    }
  });
}

Please suggest where i am wrong.