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.


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.

jqgrid demos 1249352783153


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> 

== JS CODE ==

   	var mygrid = jQuery("#s3list").jqGrid({
	datatype: "json",
	width: 700,
   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   		{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}
   	mtype: "POST",
   	pager: '#s3pager',
   	sortname: 'id',
    viewrecords: true,
	rownumbers: true,
    sortorder: "desc",
	gridview : true,
    caption:"Toolbar Search Example"
jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',

jQuery – Horizontal Accordion

Currrent functionality:

  • No dependencies
  • Optional use of easing plugin
  • Close and open content one after the other
  • Close and open at the same time
  • Choose trigger (mouseover, click …)
  • Easily control through external calls
  • Open content on load
  • Open content through hash tags in the url (#tab1, #tab2…)
  • Position of handle (left, right)
  • Mixed handle positions – 2 left , 2 right …
  • Cycle through content by interval
  • Events when animations starts and ends
  • Hide content until all has been assembled



Text-overflow: ellipsis for Firefox via jQuery

There are a few CSS features that Microsoft pioneered and has had available to developers in Internet Explorer for a long time now. One of those features is the text-overflow property, which is now in CSS3 and has implementations in Safari, and Opera. Firefox still does not support this feature, but I have heard that it will in Firefox 3.1.

Here is a rundown of what the property does. When text overflows an element’s box, the text-overflow property helps leave a visual hint to the user that there is more text. When a value of ellipsis is used, three dots will be shown before the text is clipped by overflow: hidden.

Lorem ipsum dolor sit amet, c…

I wanted to be able to use this feature in all browsers, so I wrote a small jQuery plugin in order to support Firefox.

You can download the plugin here.

To use, just call ellipsis() on a jQuery object. For example:


Source: http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

Drag & Drop with PHP & jQuery

Drag & Drop with PHP & jQuery


Posted in PHP. Tags: , . Leave a Comment »