This example demonstartes a new filterToolbar method. When we call this method the search
is placed above the header columns. This method is similar to filterGrid, but resolves the issue
related when we resize the coulmns.
HTML
<![CDATA[
<table id="s2list"></table>
<div id="s2pager"></div>
<div id="filter" style="margin-left:30%;display:none">Search Invoices</div>
<script src="search2.js" type="text/javascript"> </script>
]]>
Java Scrpt code
<![CDATA[
...
var mygrid = jQuery("#s3list").jqGrid({
url:'search.php?q=1',
datatype: "json",
width: 700,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:65},
{name:'invdate',index:'invdate', width:90,searchoptions:{dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd'});} }},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right", stype:'select', editoptions:{value:":All;0.00:0.00;12:12.00;20:20.00;40:40.00;60:60.00;120:120.00"}},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
mtype: "POST",
rowList:[10,20,30],
pager: '#s3pager',
sortname: 'id',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
gridview : true,
caption:"Toolbar Search Example"
});
jQuery("#s3list").jqGrid('navGrid','#s3pager',{edit:false,add:false,del:false,search:false,refresh:false});
jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
onClickButton:function(){
mygrid[0].toggleToolbar()
}
});
jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',
onClickButton:function(){
mygrid[0].clearToolbar()
}
});
jQuery("#s3list").jqGrid('filterToolbar');
]]>
PHP with MySQL
<![CDATA[
See Multiple search in What is new in 3.3 version.
]]>