Recently, I was looking for a plugin for jQuery which had very simple task of sort the lines of a table by a particular column. I found some, but I wanted one that was more modern, sophisticated. It was then that I found the Animated Table Sort. Unfortunately, I could not use because the plugin only exchanged the contents of each column at the right position rather than relocate the entire row, inverting all properties of element (events, styles, etc.). I then decided to put my hands dirty to create a plugin from scratch, with an other logic.

The jQuery Animate Table Sorter Plugin is a fast, lightweight and simple plugin to sort your tables with animation.

Example

Parameters

• string sortDirection
• Either ‘asc’ for ascending order or ‘desc’ for descending order.
  Default ‘asc’.
• string sortType
• Either ‘alpha’ or, if wanting to sort numerically, ‘numeric’.
  Default ‘numeric’.
• numeric column
• The index of the column in your table to sort on
• numeric duration
• The duration of the animation in milliseconds.
  Default ’1000′.
• function callback
• A function to be called when the sort will be finished.
  Default null.

$(window).ready(function()
{
	$('.box-table tbody tr').each(function()
	{
		var pos = $('tr', $(this).parent().parent()).index(this);
 
		$(this).click(function(){ alert('Row ' + pos); });
	});
 
	$('.box-table th').click(function()
	{
		var $table = $(this).parent().parent().parent();
		var index = $('th', $table).index(this);
		var order = !this.order || this.order == 'desc' ? 'asc' : 'desc';
		this.order = order;
 
		$table.sortTable
		({
			column: index,
			sortType: (index == 1 ? 'alpha' : 'numeric'),
			sortDirection: order
		});
		return false;
	});
});