alt
Sponsored links
Online Training
Career Series
Exforsys
Exforsys arrow Tutorials arrow jQuery arrow jQuery Table Row Filtering
Site Search


jQuery Table Row Filtering
Article Index
jQuery Table Row Filtering
jQuery Table Row Filter Options

jQuery Table Row Filtering

Earlier we examined sorting and paging as techniques for helping users focus on relevant portions of a table's data. We saw that both could be implemented either with server-side technology or with JavaScript. Filtering completes this arsenal of data arrangement strategies. By displaying to the user only the table rows that match a given criterion, we can strip away needless distractions.

We have already seen how to perform a type of filter, highlighting a set of rows.

Now we will extend this idea to actually hiding rows that don't match the filter.

We can begin by creating a place to put our filter buttons. In typical fashion, we insert these controls using JavaScript so that people without scripting available do not see the options:

  1. $(document).ready(function() {
  2.  
  3. $('table.filterable').each(function() {
  4.  
  5. var $table = $(this);
  6.  
  7. $table.find('th').each(function (column) {
  8.  
  9. if ($(this).is('.filter-column')) {
  10.  
  11. var $filters = $('</p>
  12. <div class="filters">
  13. <h3>Filter by '
  14.  
  15. + $(this).text() + ':</h3>
  16. </div>
  17. ');
  18.  
  19. $filters.insertBefore($table);
  20.  
  21. }
  22.  
  23. });
  24.  
  25. });
  26.  
  27. });
 

 

We get the label for the filter box from the column headers, so that this code can be reused for other tables quite easily. Now we have a heading awaiting some buttons:



 
< Prev   Next >
Exforsys Offers
© 2008 Exforsys.com
Joomla! is Free Software released under the GNU/GPL License.
Page copy protected against web site content infringement by Copyscape