alt
Advertisement
Sponsored links
Online Training
Career Series
Exforsys
Exforsys arrow Tutorials arrow jQuery arrow jQuery Completed sorting and paging code
Site Search


jQuery Completed sorting and paging code

Learning jQuery - The Finished Code

The completed sorting and paging code in its entirety follows:

  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. $table.find('th').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() + ' ' + $cell.text().toUpperCase();
  36.  
  37. };
  38.  
  39. }
  40.  
  41. else if ($(this).is('.sort-numeric')) {
  42.  
  43. findSortKey = function($cell) {
  44.  
  45. var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''));
  46.  
  47. return isNaN(key) ? 0 : key;
  48.  
  49. };
  50.  
  51. }
  52.  
  53. else if ($(this).is('.sort-date')) {
  54.  
  55. findSortKey = function($cell) {
  56.  
  57. return Date.parse('1 ' + $cell.text());
  58.  
  59. };
  60.  
  61. }
  62.  
  63. if (findSortKey) {
  64.  
  65. $(this).addClass('clickable').hover(function() {
  66.  
  67. $(this).addClass('hover');
  68.  
  69. }, function() {
  70.  
  71. $(this).removeClass('hover');
  72.  
  73. }).click(function() {
  74.  
  75. var newDirection = 1;
  76.  
  77. if ($(this).is('.sorted-asc')) {
  78.  
  79. newDirection = -1;
  80.  
  81. }
  82.  
  83. rows = $table.find('tbody > tr').get();
  84.  
  85. $.each(rows, function(index, row) {
  86.  
  87. row.sortKey =
  88.  
  89. findSortKey($(row).children('td').eq(column));
  90.  
  91. });
  92.  
  93. rows.sort(function(a, b) {
  94.  
  95. if (a.sortKey < b.sortKey) return -newDirection;
  96.  
  97. if (a.sortKey > b.sortKey) return newDirection;
  98.  
  99. return 0;
  100.  
  101. });
  102.  
  103. $.each(rows, function(index, row) {
  104.  
  105. $table.children('tbody').append(row);
  106.  
  107. row.sortKey = null;
  108.  
  109. });
  110.  
  111. $table.find('th').removeClass('sorted-asc') .removeClass('sorted-desc');
  112.  
  113. var $sortHead = $table.find('th').filter(':nth-child(' + (column + 1) + ')');
  114.  
  115. if (newDirection == 1) {
  116.  
  117. $sortHead.addClass('sorted-asc');
  118.  
  119. } else {
  120.  
  121. $sortHead.addClass('sorted-desc');
  122.  
  123. }
  124.  
  125. $table.find('td').removeClass('sorted')
  126.  
  127. .filter(':nth-child(' + (column + 1) + ')')
  128.  
  129. .addClass('sorted');
  130.  
  131. $table.alternateRowColors($table);
  132.  
  133. $table.trigger('repaginate');
  134.  
  135. });
  136.  
  137. }
  138.  
  139. });
  140.  
  141. });
  142.  
  143. });
  144.  
  145. $(document).ready(function() {
  146.  
  147. $('table.paginated').each(function() {
  148.  
  149. var currentPage = 0;
  150.  
  151. var numPerPage = 10;
  152.  
  153. var $table = $(this);
  154.  
  155. $table.bind('repaginate', function() {
  156.  
  157. $table.find('tbody tr').show()
  158.  
  159. .lt(currentPage * numPerPage)
  160.  
  161. .hide()
  162.  
  163. .end()
  164.  
  165. .gt((currentPage + 1) * numPerPage - 1)
  166.  
  167. .hide()
  168.  
  169. .end();
  170.  
  171. });
  172.  
  173. var numRows = $table.find('tbody tr').length;
  174.  
  175. var numPages = Math.ceil(numRows / numPerPage);
  176.  
  177. var $pager = $('</p>
  178. <div class="pager"></div>
  179. ');
  180.  
  181. for (var page = 0; page < numPages; page++) {
  182.  
  183. $('<span class="page-number">' + (page + 1) + '</span>')
  184.  
  185. .bind('click', {'newPage': page}, function(event) {
  186.  
  187. currentPage = event.data['newPage'];
  188.  
  189. $table.trigger('repaginate');
  190.  
  191. $(this).addClass('active').siblings().removeClass('active');
  192.  
  193. })
  194.  
  195. .appendTo($pager).addClass('clickable');
  196.  
  197. }
  198.  
  199. $pager.find('span.page-number:first').addClass('active');
  200.  
  201. $pager.insertBefore($table);
  202.  
  203. $table.trigger('repaginate');
  204.  
  205. });
  206.  
  207. });
 

 


Trackback(0)
Comments (0)add comment

Write comment

busy
 
< 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