How to apply Custom Paging in JQGRID

Question

I have a Jqgrid, In my MVC view, there is no problem in displaying the data in the grid. But I want to apply the custom paging in the grid, so i have created the method in my controller which takes two parameters (pageNumber and rowSize) and returns the data based on the these two parameters. Now my question is that how can i send these two property of grid to the controller and get the changes reflected on the grid.

Note: i also tried to send the value of rowSize using ajax on the button click but after executing the code in the server there is no changes in the grid(as i expected).

View:

<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
<script type="text/javascript">
    jQuery("#jQGridDemo").jqGrid({

        datatype: "json",
        colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department',
                'Age', 'Salary', "Address", 'Marital Status'],
        colModel: [
                 { name: 'ID', index: '_id', width: 20, stype: 'text' },
                 { name: 'FirstName', index: 'FirstName', width: 150 },
                 { name: 'LastName', index: 'LastName', width: 150 },
                 { name: 'LastSSN', index: 'LastSSN', width: 100 },
                 { name: 'Department', index: 'Department', width: 80, align: "right" },
                 { name: 'Age', index: 'Salary', width: 80, align: "right" },
                 { name: 'Salary', index: 'Salary', width: 80, align: "right" },
                 { name: 'Address', index: 'Address', width: 150, sortable: false },
                 { name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }
               ],
        rowNum: 10,
        loadonce: false,
        rowList: [5, 10, 20, 50],
        pager: "#jQGridDemoPager",
        height: "100%",
        sortname: 'ID',
        viewrecords: true,
        sortorder: "desc",
        caption: "List Employee Details",
        url: '/Home/Records'
    });

    $(".ui-pg-input").click(function () {

        alert(this.value);
        $.ajax({
            type: 'POST',
            url: window.location + "Home/Records",
            data: {
                pageNumber: this.value
            },
            success: function (data) {
                alert("ajax call completed");
            },
            error: function () {
                alert("Something went Wrong");
            }
        });
    })
</script>

Controller

 public JsonResult Records(int pageNumber=3, int rowSize = 5)
 {
     // code for custom paging
     return json;
 }

JSON Returned from Server:

[{"ID":1,"FirstName":"Alan","LastName":"Donald","LastSSN":"123","Department":"Bowler","Age":"44 ","Salary":"1000000 ","Address":"South Africa","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":1}],"IsTemporary":false}},{"ID":2,"FirstName":"Donald","LastName":"Duck","LastSSN":"345","Department":"Actor","Age":"98 ","Salary":"2000000 ","Address":"USA","MaritalStatus":null,"EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":2}],"IsTemporary":false}},{"ID":3,"FirstName":"Virat","LastName":"Kohli","LastSSN":"111","Department":"Batsman","Age":"28 ","Salary":"1000000 ","Address":"India","MaritalStatus":"Unknown ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":3}],"IsTemporary":false}},{"ID":4,"FirstName" :"MS","LastName":"Dhoni","LastSSN":"112","Department":"Captain","Age":"31 ","Salary":"9000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":4}],"IsTemporary":false}},{"ID":5,"FirstName":"Sachin","LastName":"Tendulkar","LastSSN":"113","Department":"Superman","Age":"40 ","Salary":"90000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":5}],"IsTemporary":false}},{"ID":6,"FirstName":"Virendra","LastName":"Sehwag","LastSSN":"114","Department":"Batsman","Age":"36 ","Salary":"8000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":6}],"IsTemporary":false}},{"ID":7,"FirstName":"Zaheer ","LastName":"Khan","LastSSN":"115","Department":"Bowler","Age":"36 ","Salary":"3000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":7}],"IsTemporary":false}},{"ID":8,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":8}],"IsTemporary":false}},{"ID":9,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":9}],"IsTemporary":false}},{"ID":10,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo" ,"Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":10}],"IsTemporary":false}}]

Answer 1

I think there are misunderstanding how jqGrid works. If you don't use loadonce: true option jqGrid send automatically request to url with additional parameters which specify the page size and the requested page. So you don't need to many any $.ajax and you don't need to bind $(".ui-pg-input").click . Default names of 1-based "page number" parameter is page and the name of "row size" parameter is rows . So you need just rename parameters of Records actions.

Alternatively you can use prmNames option of jqGrid (see the documentation ) to inform jqGrid to use other parameter names as default page and rows . For example you can add the option

prmNames: {page: "pageNumber", rows: "rowSize"}

to solve your problem.