jqGrid 3.5 Auto-filter option

Updated 1st Aug, 2010: A JqGrid PHP Component is also available (free of cost), Generate fully functional Grid in record time.

For excel like Autofilter option using javascript … i found 2 solutions …

1. Tabular data in table form is common on web sites and web applications, and a common requirement is to manipulate the data tables on the client side, rather than going back to the server to sort, filter, page, etc. This library offers the key functionality that is typical – the most common of which is client-side table sorting.

Some of the key features of this library are:

• Sorting is fast. Much faster than most other libraries, due to a number of optimizations
• Rowspan and Colspan in headers will not confuse the code
• Alternate row coloring (a common item) is handled by re-shading after sorting or filtering
• Tbody contents are handled separately, so there can be separate sortable sections of a table
• Easy CSS classes are applied to cells after filtering, sorting, etc which you can hook into from your CSS rules to show the sorted column or the cells which are filtered.

http://www.javascripttoolbox.com/lib/table/

2. jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

New thing for me was auto filter feature.

http://trirand.com/jqgrid/jqgrid.html

Here is the sample code …

== HTML ==

<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> 

Search Invoices


== JS CODE ==

   	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');

About these ads