jqgrid paging on server side

Question

I'm trying to add server side paging to my grid. In adittion, I have a filter by 'license', 'number' and 'group'. When I press the next page button the controller is called and I obtain the data but my grid is reload on page 1 and I cant view the page 2 or 3 or 4...

In onPaging event if I use a local datatype no data is shown, if I use json datatype I only can see the first page.

This is the code:

var arrayData = [];
var pgevent;
var pager;
var accion;

$(function() {
    navLocal.cambia('002');

    $( "#tabs" ).tabs();
    $("#tblResults").jqGrid({
        mtype: 'POST',
        datatype: "local",
        height: 250,
        colNames:['license', 'id', 'number', 'brand', 'model', 'show'],
        colModel:[
            {name:'license',index:'license', width:110},
            {name:'id',index:'id', hidden: true},
            {name:'number',index:'number', width:110, sorttype:"int"},
            {name:'brand',index:'brand', width:250},
            {name:'model',index:'model', width:250},
            {name:'show',index:'show', width:60, align:"center", sortable:false, formatter:playerPicFormatter}      
        ],
        multiselect: false,         
        viewrecords: true,
        pager: "#jqGridPager",
        rowNum: 10,
        caption: "Results",
        width: 700,
        loadonce: true,

        rowList: [10,20,50],



        onPaging : function(pgButton) {
            $("#tblResults").setGridParam({datatype:'json'});
            find(); 
            pgevent = pgButton;
            pager = this.p.pager;



        },

        loadComplete: function () {
            $("#tblResults").setGridParam({datatype:'local'});
        }


    });     

    find(); 
}); 



function find() {

    var gridArrayData = [];

    $.ajax({
        url : "/find.htm",
        type : "POST",
        dataType : "json",
        data: {
            license: $("#license").val(),
            number: $("#number").val(),
            group: $("#group").val(),
            page: $("#tblResults").jqGrid().getGridParam('page'),
            rowNum: $("#tblResults").jqGrid().getGridParam('rowNum'),
            sortname: $("#tblResults").jqGrid().getGridParam('sortname'),
            sortorder: $("#tblResults").jqGrid().getGridParam('sortorder')

        },
        success : function(result) {

            jQuery('#tblResults').jqGrid('clearGridData');

            for ( var i = 0; i < result.length; i++) {
                var item = result[i];
                gridArrayData.push({
                    id : item.id,
                    license : item.license,
                    number : item.number,
                    brand : item.brand,
                    model : item.model

                });
            }
            // set the new data
            $("#tblResults").jqGrid('setGridParam', { 
                data : gridArrayData
            });

            // refresh the grid
            $("#tblResults").trigger('reloadGrid', [{page:2}]);
        },

        loadComplete: function () {
            $("#tblResults").setGridParam({datatype:'local'});
            }
    });

    arrayData = gridArrayData;

}

Answer 1

You are doing asynchronous calls in find but in your callback you have other statement after find. These will be executed before find finishes. Could that be the problem?