jQuery table sorting & paging

I found this great article about table sorting and paging using the jQuery library. I’ve updated it to work with jQuery 1.2.2. Which involves changing the .lt(n) and .gt(n) methods to the new .filter(’:lt(n)’) method and a few other things.

The original article is well worth a read at:
http://www.packtpub.com/article/jquery-table-manipulation-part2.

/*
--------------------------------------------------
Table sorting
--------------------------------------------------
*/
var alternateRowColors = function($table) {
	$('tbody tr:has(td):odd', $table).removeClass('alt').addClass('odd');
	$('tbody tr:has(td):even', $table).removeClass('odd').addClass('alt');
};

$('table.sortable').each(function() {
	var $table = $(this);

	alternateRowColors($table);
	$table.find('th').each(function(column) {
		var findSortKey;
		if ($(this).is('.sort-numeric')) {
			findSortKey = function($cell) {
				var key = parseFloat($cell.text().replace(/^[^d.]*/, ”));
				return isNaN(key) ? 0 : key;
			};
		}
		else if ($(this).is(’.sort-date’)) {
			findSortKey = function($cell) {
				return Date.parse(’1 ‘ + $cell.text());
			};
		}
		else {
			//($(this).is(’.sort-alpha’)) {
			findSortKey = function($cell) {
				return $cell.find(’.sort-key’).text().toUpperCase() + ‘ ‘ + $cell.text().toUpperCase();
			};
		}

		if (findSortKey) {
			$(this).addClass(’clickable’).hover(
				function() {
					$(this).addClass(’hover’);
				}
				, function() {
					$(this).removeClass(’hover’);
				}
			)
			.click(function() {
				var newDirection = 1;
				if ($(this).is(’.sorted-asc’)) {
					newDirection = -1;
				}
				rows = $table.find(’tbody > tr’).get();
				$.each(rows, function(index, row) {
					row.sortKey = findSortKey($(row).children(’td’).eq(column));
				});

				rows.sort(function(a, b) {
					if (a.sortKey  b.sortKey) return newDirection;
					return 0;
				});

				$.each(rows, function(index, row) {
					$table.children(’tbody’).append(row);
					row.sortKey = null;
				});

				$table.find(’th’).removeClass(’sorted-asc’).removeClass(’sorted-desc’);
				var $sortHead = $table.find(’th’).filter(’:nth-child(’ + (column + 1) + ‘)’);
				if (newDirection == 1) {
					$sortHead.addClass(’sorted-asc’);
				}
				else {
					$sortHead.addClass(’sorted-desc’);
				}
				$table.find(’td’).removeClass(’sorted’)
					.filter(’:nth-child(’ + (column + 1) + ‘)’)
						.addClass(’sorted’);

				alternateRowColors($table);
				$table.trigger(’repaginate’);
			});
		}
	});
});

/*
————————————————–
Table paging
————————————————–
*/
$(’table.paging’).each(function() {
	var currentPage = 0;
	var numPerPage = 10;

	var $table = $(this);

	$table.bind(’repaginate’, function() {
		$table.find(’tbody tr’).show()
			.filter(’:lt(’ + currentPage * numPerPage + ‘)’)
				.hide()
			.end()
			.filter(’:gt(’ + ((currentPage + 1) * numPerPage - 1) + ‘)’)
				.hide()
			.end();
	});

	var numRows = $table.find(’tbody tr’).length;
	var numPages = Math.ceil(numRows / numPerPage);

	if (numPages > 1) {
		var $pager = $(’

‘);

		//$(’‘ + numRows + ‘ results found’).appendTo($pager);
		$(’Showing page ‘ + (currentPage + 1) + ‘ of ‘ + numPages + ”).appendTo($pager);

		for (var page = 0; page < numPages; page++) {
			$(’‘ + (page + 1) + ‘‘)
			.bind(’click’, {’newPage’: page}, function(event) {
				currentPage = event.data['newPage'];
				$table.trigger(’repaginate’);
				$(this).addClass(’active’).siblings().removeClass(’active’);
				$(this).parent().find(’.pager-message’).text(’Showing page ‘ + (currentPage + 1) + ‘ of ‘ + numPages);
			})
			.appendTo($pager).addClass(’clickable’);
		}

		$pager.find(’span.page-number:first’).addClass(’active’);
		$pager.insertBefore($table);
		$table.trigger(’repaginate’);
	}

});