Exforsys.com
 

Sponsored Links

 

jQuery Tutorials

 
Home Tutorials jQuery
 

jQuery - Sorting Other Types of Data

 

Learning jQuery - Sorting Other Types of Data

Our sort routine should be able to handle not just the Title and Author columns, but the Publish Dates and Price as well. Since we streamlined our comparator function, it can handle all kinds of data, but the computed keys will need to be adjusted for other data types. For example, in the case of prices we need to strip off the leading $ character and parse the rest, then compare them:



Sample Code
  1. var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''))
  2. row.sortKey = isNaN(key) ? 0 : key
Copyright exforsys.com



The result of parseFloat() needs to be checked, because if no number can be extracted from the text, NaN is returned, which can wreak havoc on .sort(). For the date cells, we can use the JavaScript Date object:


Sample Code
  1. row.sortKey = Date.parse('1 ' + $cell.text())
Copyright exforsys.com



The dates in this table contain a month and year only; Date.parse() requires a fully‑specified date, so we prepend the string with 1. This provides a day to complement the month and year, and the combination is then converted into a timestamp, which can be sorted using our normal comparator.


We can apportion these expressions across separate functions, and call the appropriate one based on the class applied to the table header:


Sample Code
  1. $.fn.alternateRowColors = function() {
  2.         $('tbody tr:odd', this).removeClass('even').addClass('odd')
  3.         $('tbody tr:even', this).removeClass('odd').addClass('even')
  4.         return this
  5.     }
  6.     $(document).ready(function() {
  7.         var alternateRowColors = function($table) {
  8.         $('tbody tr:odd', $table).removeClass('even').addClass('odd')
  9.         $('tbody tr:even', $table).removeClass('odd').addClass('even')
  10.     }
  11.     $('table.sortable').each(function() {
  12.         var $table = $(this)
  13.         $table.alternateRowColors($table)
  14.         $('th', $table).each(function(column) {
  15.         var findSortKey
  16.         if ($(this).is('.sort-alpha')) {
  17.             findSortKey = function($cell) {
  18.             return $cell.find('.sort-key').text().toUpperCase()
  19.             + ' ' + $cell.text().toUpperCase()
  20.             }
  21.         }
  22.         else if ($(this).is('.sort-numeric')) {
  23.             findSortKey = function($cell) {
  24.             var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''))
  25.             return isNaN(key) ? 0 : key
  26.             }
  27.         }
  28.         else if ($(this).is('.sort-date')) {
  29.             findSortKey = function($cell) {
  30.             return Date.parse('1 ' + $cell.text())
  31.         }
  32.     }
  33.     if (findSortKey) {
  34.         $(this).addClass('clickable').hover(function() {
  35.         $(this).addClass('hover')
  36.         }, function() {
  37.             $(this).removeClass('hover')
  38.             }).click(function() {
  39.             var rows = $table.find('tbody > tr').get()
  40.             $.each(rows, function(index, row) {
  41.             row.sortKey =
  42.             findSortKey($(row).children('td').eq(column))
  43.             })
  44.             rows.sort(function(a, b) {
  45.             if (a.sortKey < b.sortKey) return -1
  46.             if (a.sortKey > b.sortKey) return 1
  47.             return 0
  48.             })
  49.             $.each(rows, function(index, row) {
  50.             $table.children('tbody').append(row)
  51.             row.sortKey = null
  52.             })
  53.             $table.alternateRowColors($table)
  54.             })
  55.         }
  56.     })
  57. })
  58. })
Copyright exforsys.com




The findSortKey variable doubles as the function to calculate the key and a flag to indicate whether the column header is marked with a class making it sortable. We can now sort on date or price:




Read Next: jQuery - Column Highlighting



 

 

Comments



Post Your Comment:

Members Please Login
Your Name:*
e-mail ID:(required for notification)*
Image Verification: 
 
 Subscribe    

Sponsored Links

 

Subscribe via RSS


Get Daily Updates via Subscribe to Exforsys Free Training via email


Get Latest Free Training Updates delivered directly to your Inbox...

Enter your email address:


 

Subscribe to Exforsys Free Training via RSS
 

 
Partners -  Privacy and Legal Policy -  Site News -  Contact   Sitemap  

Copyright © 2000 - 2010 exforsys.com. All Rights Reserved

Page copy protected against web site content infringement by Copyscape