Pagination not working on JQGrid

Question

I am trying to do pagination in my jqgrid. Here is my code:

<div>
    <table id="JQGridDemo"></table>
    <div id="jqFooter" style="text-align:center;"></div>
</div>

<script type="text/javascript" language="javascript">
$(document).ready(function () {
    $('#JQGridDemo').jqGrid({
        url: '@Url.Action("JQGrid")',
        datatype: "json",
        mtype: "post",
        colNames: ['ID', 'Name', 'Model', 'Cost', 'Date'],
        colModel: [{
            name: 'ID',
            index: 'ID'
        }, {
            name: 'Name',
            index: 'Name'
        }, {
            name: 'Model',
            index: 'Model'
        }, {
            name: 'Cost',
            index: 'Cost'
        }, {
            name: 'Date',
            width: '464px',
            index: 'Date'
        }],
        height: '100%',
        autowidth: true,
        shrinkToFit: false,
        pager: "#jqFooter",
        rowNum: 10,
        sortName: 'Name',
        viewRecords: true,
        sortorder: "asc",
        loadonce: true,
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            cell: "cell",
            id: "ID",
            userdata: "userdata"
        }
    });
});
</script>   

and my controller code is

public JsonResult JQGrid() {
     AssignmentEntities entities = new AssignmentEntities();
     var gridDetail = (from list in entities.Brands select list).ToList();
     var jsonData = new {
         total = 6, page = page, records = gridDetail.Count, rows = gridDetail
     };
     return Json(jsonData, JsonRequestBehavior.AllowGet);
 }

Can anyone tell me why pagination is not working for me??

Answer 1

Looking at Gowtham answer I could understand what I was doing wrong. I'm working with a kind of return that json object is inside of variable. I hope this can clarify for other users.

My JSON: [status: 'ok', obj: {currpage: 1, totalpages: 3, totalrecords: 30, rows: {...}}]

jsonReader: {
                page: "obj.currpage",
                total: "obj.totalpages",
                records: "obj.totalrecords",
                repeatitems: false,
                root: "obj.rows",
                cell: "cell",
                id: "0"
            },

Answer 2

Iam using JqGrid which is working fine for me, hope it helps you in finding the issue

• Make Sure Jquery Neccessary files are loaded
• Make Sure Grid.locale file is loaded

• if you are still unable to get paging debug in Google Chrome See the Console Tab u ll find the error if in case u missed out anything

  `

      jQuery(document).ready(function() {
          jQuery("#list").jqGrid({
              url: '/EmployeeWiseReport/GetGridData/',
              datatype: 'json',
              mtype: 'GET',
              width: 600,
              colNames: ['Employee Id', 'UserName', 'MobileNo', 'EmailId', 'NOofChild', 'ChildName'],
              colModel: [
                { name: 'UserId', index: 'UserId', align: 'left' },
                { name: 'UserName', index: 'UserName', align: 'left' },
                { name: 'MobileNo', index: 'MobileNo', align: 'left' },
                { name: 'EmailId', index: 'EmailId', align: 'left' },
                { name: 'NOofChild', index: 'NOofChild', align: 'left' },
                { name: 'ChildName', index: 'ChildName', align: 'left' }
  
  
          ],
          jsonReader: {
              repeatitems: false,
              root: function(obj) { return obj; },
              page: function(obj) { return 1; },
              total: function(obj) { return 1; },
              records: function(obj) { return obj.length; }
          },
          loadonce: true,
          pager: jQuery('#pager'),
          rowNum: 10,
          rowList: [5, 10, 20, 50],
          sortname: 'UserId',
          sortorder: "asc",
          viewrecords: false,
          caption: 'Employee Wise Report Information'
      }).navGrid(pager, { edit: false, add: false, del: false, refresh: true, search: false });
  });
  
  
  
  
  

    <table id="list" class="scroll" style="height: 250px; width: 550px;" cellpadding="0"
  cellspacing="0" width="80%">
  

   <table id="pager" class="scroll" style="text-align: center;">
   </table>