sendesignz

How to Filter on Any Column of a Table Using jQuery

Usually most of the designers and developers are using Divs rather then using Tables. But we still need tables in our day to day applications. In this example I will show you how to use on of the highly flexible  jQuery table plug-in call datatables . For example you have a Large amount of data and you need to filtering on any column of the table to find instances of a specific character in that column.

See the Demo

DataTables

The DataTables plugin is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

DataTables provides the following features:

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Display data from almost any data source
  • DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
  • Scrolling options for table viewport
  • Fully internationalisable
  • jQuery UI ThemeRoller support
  • Rock solid - backed by a suite of 1400+ unit tests
  • Wide variety of plug-ins inc. TableTools, FixedHeader, KeyTable
  • State saving
  • Hidden columns
  • Dynamic creation of tables
  • Ajax auto loading of data
  • Custom DOM positioning
  • Single column filtering
  • Alternative pagination types
  • Non-destructive DOM interaction
  • Sorting column(s) highlighting
  • Extensive plug-in support
  • Sorting, type detection, API functions, pagination and filtering
  • Fully themeable by CSS
  • Solid documentation
  • 60+ pre-built examples
  • Full support for Adobe AIR

Let start with the simple markup

HTML

<table width="600px" border="0" cellpadding="4" class="studrec">

<thead>
<tr>
<th>ID</th>
<th>Company</th>
<th>Contact</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr><td>101</td>
<td>Company1</td>
<td>Maria</td>
<td>Berlin</td>
<td>German</td>
</tr>
<tr><td>102</td>
<td>Company2</td>
<td>Anna</td>
<td>London</td>
<td>UK</td>
</tr>
<tr><td>103</td>
<td>Company3</td>
<td>Thomas</td>
<td>Strasbourg</td>
<td>France</td>
</tr>
<tr><td>104</td>
<td>Company4</td>
<td>Terrence</td>
<td>Oslo</td>
<td>Norway</td>
</tr>
<tr><td>105</td>
<td>Company5</td>
<td>Jimmy</td>
<td>Singapore</td>
<td>Singapore</td>
</tr>
<tr><td>106</td>
<td>Company6</td>
<td>Hardy</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr><td>107</td>
<td>Company7</td>
<td>Hanna</td>
<td>Madrid</td>
<td>Spain</td>
</tr>
<tr><td>108</td>
<td>Company8</td>
<td>Sommor</td>
<td>Los Angeles</td>
<td>USA</td>
</tr>
<tr><td>109</td>
<td>Company9</td>
<td>Dia</td>
<td>Birmingham</td>
<td>UK</td>
</tr>
<tr><td>110</td>
<td>Company10</td>
<td>John</td>
<td>Munich</td>
<td>German</td>
</tr>
<tr><td>111</td>
<td>Company11</td>
<td>Laurence</td>
<td>Barcelona</td>
<td>Spain</td>
</tr>
<tr><td>112</td>

<td>Company12</td>

<td>Lia</td>

<td>Paris</td>
<td>France</td>
</tr>
<tr><td>113</td>
<td>Company13</td>
<td>Catherina</td>
<td>Houston</td>
<td>USA</td>
</tr>
<tr><td>114</td>
<td>Company14</td>
<td>Morisa</td>
<td>San Jose</td>
<td>USA</td>
</tr>
<tr><td>115</td>
<td>Company15</td>
<td>Jenifer</td>
<td>Winchester</td>
<td>UK</td>
</tr>
</tbody>
</table>

 

Javascript

I have created a "filter.js" file into 'js' folder. All of our jQuery code will go into this javascript file.

Dowonload jquery-1.4.4.min.js

Download datatable.js

extract the zip file, copy and paste the 'jquery.dataTables.js' file from the media folder into our 'js' folder.

<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>

<script src="js/jquery.dataTables.js" type="text/javascript"></script>

<script src="js/filter.js" type="text/javascript"></script>

 

We already create the "filter.js" file.  Now we are going to add our javascript into the "filter.js" file. Add the following code into filter.js file file.

$(document).ready(function() {

$('.studrec').dataTable( );

});

 

We can see that the dataTable() method (from the JavaScript file jquery.dataTables.js) will be applied to the table element of class 'studrec'. we can do more in the dataTable() method. If you need to sort the table you can do like this.

$(document).ready(function() {

$('.studrec').dataTable( {

"bSort": true

});

});

 

Styling with CSS

Now we are going to start some basic rules in CSS.

}body{

font-family:verdana;

font-size:11px;

}

 

To add Zebra Strips to a table CSS 3 introduces the pseudo-class nth-child, which makes it ridiculously simple to do this without javascript.

tbody tr:nth-of-type(even){

background:rgba(242,232,218,0.5);

}

thead th{

background:rgba(225,214,199,1);

}

 

nth-of-type(even) selects even numbered elements, like the 2nd, 4th, 6th, etc.
 

There are lot more you can do with DataTables. For more examples please visit http://www.datatables.net/examples/

Leave your comments

Post comment as a guest

0
terms and condition.
  • No comments found