Question

I have been using jqGrid for a few months now, and I have made a handful of data grids with the filterToolbar option:

$('#grid_id').jqGrid('filterToolbar');

It has worked perfectly in the past (passing an array of POST variables to the php page defined in the url option in the jqGrid definition, of which there is one variable “_search:true”). The most recent grid I made, after I press enter on the filterToolar, it just reloads the grid… passing “_search:false” to the php script. Does anyone know why this would be happening. here is the script;

$('#processed_list').jqGrid({
    url:'/phpAJA?&sql=' + sql,
    editurl: '/phpAJAX?sql=' + sql,
    height: 225,
    width: 600,
    datatype: 'xml',
    mtype: 'POST',
    colModel:[
        {name:"Invoice Num",index:"InvoiceNum",width:"8"},
        {name:"Job Num", index:"JobNum",width:"8"},
        {name:"Customer",index:"Customer",width:"16"},
        {name:"Emailed To",index:"to_email",width:"16"},
        {name:"Date Processed",index:"timestamp",width:"16"}
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'Processed Invoices',
    editable: false
});
$("#processed_list")
.jqGrid('navGrid', '#pager', {edit: false,add: false, del: false, search: false, refresh:true},{},{},{},{},{})
.jqGrid('navButtonAdd',"#pager",{
    caption:"reprint invoice", buttonicon:"ui-icon-print", onClickButton:function(){ ...some function... }, position: "last", title:"", cursor: "pointer"
})
.jqGrid('filterToolbar');

Like I said, it all works except when I try the toolbarFilter search, it just reloads the grid (passing “_search:false” to the php script).

Any help would be greatly appreciate.

Thanks.

Answer 1

So I figured out the problem with a little trial and error. The filterToolbar was referencing the column names in the colModel, and not the index, which it should be referencing. So in the colModel option in the jqGrid definition I have to change the names to the real names in the database, and then add the other colName option to reset the column headings in the web page. See the following code:

$('#processed_list').jqGrid({
    url:'/phpAJAX?sql=' + sql,
    editurl: '/phpAJAX?sql=' + sql,
    height: 225,
    width: 600,
    datatype: 'xml',
    mtype: 'POST',
    colNames:["Invoice Num","Job Num","Customer","Emailed To","Time Sent"],
    colModel:[
        {name:"InvoiceNum",index:"InvoiceNum",width:"8"},
        {name:"JobNum", index:"JobNum",width:"8"},
        {name:"Customer",index:"Customer",width:"16"},
        {name:"to_email",index:"to_email",width:"16"},
        {name:"timestamp",index:"timestamp",width:"16"}
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'Processed Invoices',
    editable: false
});