How to bind data to jqgrid in onSortCol through ajax

Question

Hi I need to bind data for jqgrid which will be returned from server in onSortCol/onPaging functions. My requirement is to implement batching/paging in jqgrid.

If the returned data contains more than 1500 records then i need to bind first 1000 records, and next 500 records in the next batch (similar to google search results) to increase the performance. If user clicks next page after the 1000th record I need to get the next 500 records from server and bind it to the grid. My row count will be like [10,20,30,40,50] records per page. So the pagination and total records count should be updated according to these total (1500) records.

If user clicks sorting on any column then I need to get the last records and bind it to the grid. I am able to get the sorted data (the last 500 records) from the server through ajax but unable to bind the data in onSortCol function. Can any one let me know how to achieve this? My working code is `

    $(function () {
        //Hidden fields values which are returned from code behind
        var colM = JSON.parse(document.getElementById("GridModel").value);
        var colN = JSON.parse(document.getElementById("GridColumnNames").value); 
        var obj = JSON.parse(document.getElementById("GridResult").value);
        var colData = obj.RECORD;
        //debugger;

        //Values which are assigned in the code behind
        var totalRecords=<%=lTotalRecords%>;
        var recordsperpage=<%=lRecPerPage%>;
        var batchstart=<%=lBatchStart%>;
        var batchend=<%=lBatchEnd%>;
        var sortName= GetSortName("<%=sSortOn%>",colN,colM);
        var sortDirection= GetSortDirection("<%=sOrderBy%>");
        var pageCount=Math.round((totalRecords+recordsperpage-1)/recordsperpage);

        var myGriddata = {
            "rows": obj.RECORD
        };

        debugger;
        $("#jqGrid").jqGrid({
            datatype: "jsonstring",
            datastr: myGriddata,
            colNames: colN,
            colModel: getColModels(colData[0], colN, colM),
            jsonReader: { 
                repeatitems: false,
                total : totalRecords,
                records : recordsperpage },
            rowNum: recordsperpage,
            rowList: [10, 20, 30, 40, 50],
            loadtext: "Loading",
            //loadonce: true,
            pager: "#jqGridPager",
            sortname: sortName, 
            sortorder: sortDirection, 
            autowidth: true,
            height: 300,
            shrinkToFit: false,
            forceFit: true,
            onSortCol: function (index, columnIndex, sortOrder) {
                $.ajax({
                    type: "POST",
                    url: "SearchResult.aspx/OnPagingSorting",
                    data: "{'SortOnColumn':'"+index+"','SortOrderBy':'"+sortOrder+"','BatchStart':'','BatchEnd':''}",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (jsondata,status) {
                        //alert("Success");
                        if(status=="success") {
                            var myData=JSON.parse(jsondata.d);
                            myGriddata = {
                                "records": recordsperpage,
                                "total":totalRecords,
                                "rows": myData.RECORD,
                                "recordtext": "View {0} - {1} of  "+totalRecords,
                                "pgtext": "Page {0} of "+pageCount
                            };

                            $('#jqGrid').
                                jqGrid('setGridParam', 
                                {
                                    datatype: "jsonstring",
                                    datastr: myGriddata
                                });
                            //.trigger('reloadGrid');
                            //jQuery('#jqGrid').trigger('reloadGrid');
                        }
                    },
                    error: function (x, e) {
                        alert(x.readyState + " "+ x.status +" "+ x.responseText);  
                        return "stop";
                    }
                });
            },
            viewrecords: true,
            caption: "JQ Grid Documents"
        });
        jQuery("#jqGrid").jqGrid('navGrid', '#jqGridPager', {
            edit: false,
            add: false,
            del: false,
            search: false,
            refresh:false
        }).navButtonAdd('#jqGridPager', {
            caption: "Export to Excel",
            title: "Export to Excel",
            buttonicon: "ui-icon-disk",
            onClickButton: function () {

            }
        }).navButtonAdd('#jqGridPager', {
            caption: "Back",
            title: "Back",
            buttonicon: "ui-icon-disk",
            onClickButton: function () {

            },
            position: "last"});
    });


    function GetSortDirection(sortDirection)
    {
        var sorting="";
        switch (sortDirection){
            case "D":
                sorting="desc";
                break;
            case "A":
                sorting="asc";
                break;
            default:
                sorting="desc";
                break;
        }
        return sorting;
    }

    function GetSortName(sortName,colNames,colModel){
        var sortcol="";
        switch (sortName){
            case "MODIFY_DATE":
                sortcol="MODIFIED_DATE";
                break;

            default:
                sortcol=sortName;
                break;
        }
        return sortcol;
    }

    function getColModels(data, colNames, colModel) {
        var colModelsArray = [];
        for (var i = 0; i < colNames.length; i++) {
            var str;
                str = {
                    name: colModel[i],
                    index: colModel[i]
                };
            colModelsArray.push(str);
        }
        return colModelsArray;
    }

</script>`