jqGrid navgrid problem

I am using the navgrid function for pagination. But the navGrid function is not getting called. I tried to put an alert in the jqgrid.js file where navGrid is defined. But this alert is also not getting called.

$("#order-list-table").jqGrid({
    autowidth: true,
    datatype : "json",
    url: "order-list.htm",
    height: '90%',
    width: '100%',
    mtype: 'POST',
    colNames: [
        jQuery.i18n.prop('columnExternalOrderID'),
        jQuery.i18n.prop('columnInternalOrderID'),
        jQuery.i18n.prop('columnState'),
        jQuery.i18n.prop('columnDate'),
        jQuery.i18n.prop('columnErrorState'),
        jQuery.i18n.prop('columnAction'),
    ],
    colModel : [
        {name: "Ext Order ID", index: "externalOrderId",jsonmap:"externalOrderId"},
        {name: "Int Order ID", index: "id", jsonmap: "id"},
        {name: "State", index: "tkOrderStateId", jsonmap: "tkOrderStateId"},
        {name: "Date", index:"timestampOrderentry", jsonmap:"timestampOrderentry"},
        {name: "Error State", index: "tkErrorStateId", jsonmap: "tkErrorStateId"},
        {name: "Action", index: "realty", jsonmap: "realty"}
    ],
    forceFit: true,
    altRows: true,
    rowNum:2,
    rowList:[1,2],
    page: 1,
    pager: '#order-list-pager',
    sortname : "Ext Order ID",
    sortorder: "desc",
    shrinkToFit: true,
    viewrecords: true,
    jsonReader : { repeatitems: false },
    onSelectRow: function(){
        alert(jQuery("#order-list-table").getGridParam('selrow'));
    },
    gridComplete: function() {
        // resize the datagrid to fit the page properly:
        $('#order-list').width('100%');
        $('#order-list').css('overflow','hidden');
        $('#order-list').children('div').width('100%');
        $('#order-list').children('div').each(function() {
            $("div", this).width('100%');
  开发者_StackOverflow社区          $("table", this).width('100%');
            $("div", this).css('overflow','hidden');
            $("table", this).css('overflow','hidden');
            $("td", this).css('text-align','center');
            $(this).find('#order-list-table').width('100%');
        });
    }
});

var gwdth = $("#order-list").width();
$("#order-list-table").jqGrid().setGridWidth(gwdth);

jquery("#order-list-table").jqgrid('navGrid',
    '#order-list-pager',{edit:true,add:true,del:true});

Above is the jqGrid function that I call.

It seems that your error is very simple: you should replace jquery to jQuery and jqgrid to jqGrid (a capical 'G') in the last line of your code. The following statement should work:

jQuery("#order-list-table").jqGrid('navGrid',
    '#order-list-pager',{edit:true,add:true,del:true});