alt
Sponsored links
Online Training
Career Series
Exforsys
Exforsys arrow Tutorials arrow jQuery arrow jQuery - Column Highlighting
Site Search


jQuery - Column Highlighting

Learning jQuery - Column Highlighting

It can be a nice user interface enhancement to visually remind the user of what has been done in the past. By highlighting the column that was most recently used for sorting, we can focus the user's attention on the part of the table that is most likely to be relevant. Fortunately, since we've already determined how to select the table cells in the column, applying a class to those cells is simple: 

  1. $table.find('td').removeClass('sorted') 
  2.  
  3. .filter(':nth-child(' + (column + 1) + ')').addClass('sorted');  
  

Note that we have to add one to the column index we found earlier, since the :nth-child() selector is one-based rather than zero-based. With this code in place, we get a highlighted column after any sort operation:

Alternating Sort Directions

Our final sorting enhancement is to allow for both ascending and descending sort orders. When the user clicks on a column that is already sorted, we want to reverse the current sort order.

To reverse a sort, all we have to do is to invert the values returned by our comparator. We can do this with a simple variable: 

  1. if (a.sortKey < b.sortKey) return -newDirection; 
  2.  
  3. if (a.sortKey > b.sortKey) return newDirection; 
  


If newDirection equals 1, then the sort will be the same as before. If it equals -1, the sort will be reversed. We can use classes to keep track of the current sort order of a column: 

  1. $.fn.alternateRowColors = function() { 
  2.  
  3. $('tbody tr:odd', this).removeClass('even').addClass('odd'); 
  4.  
  5. $('tbody tr:even', this).removeClass('odd').addClass('even'); 
  6.  
  7. return this; 
  8.  
  9. }; 
  10.  
  11. $(document).ready(function() { 
  12.  
  13. var alternateRowColors = function($table) { 
  14.  
  15. $('tbody tr:odd', $table).removeClass('even').addClass('odd'); 
  16.  
  17. $('tbody tr:even', $table).removeClass('odd').addClass('even'); 
  18.  
  19. }; 
  20.  
  21. $('table.sortable').each(function() { 
  22.  
  23. var $table = $(this); 
  24.  
  25. $table.alternateRowColors($table); 
  26.  
  27. $('th', $table).each(function(column) { 
  28.  
  29. var findSortKey; 
  30.  
  31. if ($(this).is('.sort-alpha')) { 
  32.  
  33. findSortKey = function($cell) { 
  34.  
  35. return $cell.find('.sort-key').text().toUpperCase() + ' ' + 
  36.  
  37. $cell.text().toUpperCase(); 
  38.  
  39. }; 
  40.  
  41. } 
  42.  
  43. else if ($(this).is('.sort-numeric')) { 
  44.  
  45. findSortKey = function($cell) { 
  46.  
  47. var key = parseFloat($cell.text().replace(/^[^\d.]*/, '')); 
  48.  
  49. return isNaN(key) ? 0 : key; 
  50.  
  51. }; 
  52.  
  53. } 
  54.  
  55. else if ($(this).is('.sort-date')) { 
  56.  
  57. findSortKey = function($cell) { 
  58.  
  59. return Date.parse('1 ' + $cell.text()); 
  60.  
  61. }; 
  62.  
  63. } 
  64.  
  65. if (findSortKey) { 
  66.  
  67. $(this).addClass('clickable').hover(function() { 
  68.  
  69. $(this).addClass('hover'); 
  70.  
  71. }, function() { 
  72.  
  73. $(this).removeClass('hover'); 
  74.  
  75. }).click(function() { 
  76.  
  77. +var newDirection = 1;
  78.  
  79. if ($(this).is('.sorted-asc')) { 
  80.  
  81. newDirection = -1; 
  82.  
  83. } 
  84.  
  85. var rows = $table.find('tbody > tr').get();
  86.  
  87. $.each(rows, function(index, row) { 
  88.  
  89. row.sortKey = 
  90.  
  91. findSortKey($(row).children('td').eq(column)); 
  92.  
  93. }); 
  94.  
  95. rows.sort(function(a, b) { 
  96.  
  97. if (a.sortKey < b.sortKey) return -newDirection; 
  98.  
  99. if (a.sortKey > b.sortKey) return newDirection; 
  100.  
  101. return 0; 
  102.  
  103. }); 
  104.  
  105. $.each(rows, function(index, row) { 
  106.  
  107. $table.children('tbody').append(row); 
  108.  
  109. row.sortKey = null; 
  110.  
  111. }); 
  112.  
  113. $table.find('th').removeClass('sorted-asc') 
  114.  
  115. .removeClass('sorted-desc'); 
  116.  
  117. var $sortHead = $table.find('th').filter(' 
  119. :nth-child(' + (column + 1) + ')'); 
  120.  
  121. if (newDirection == 1) { 
  122.  
  123. $sortHead.addClass('sorted-asc'); 
  124.  
  125. } else { 
  126.  
  127. $sortHead.addClass('sorted-desc'); 
  128.  
  129. } 
  130.  
  131. $table.find('td').removeClass('sorted') 
  132.  
  133. .filter(':nth-child(' + (column + 1) + ')') 
  134.  
  135. .addClass('sorted'); 
  136.  
  137. $table.alternateRowColors($table); 
  138.  
  139. }); 
  140.  
  141. } 
  142.  
  143. }); 
  144.  
  145. }); 
  146.  
  147. }); 
  


As a side benefit, since we use classes to store the sort direction we can style the columns headers to indicate the current order as well:

Tags

See All Tags

Trackback(0)
Comments (0)add comment

Write comment

busy
 
< Prev   Next >
[ Back ]
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