jQuery SortedList (Javascript)

SortedList is a jQuery plugin to sort a list of DOM elements the way you want. Think about LI, TR, OPTION and even DIVS. You can see a demo at the website.

Example code

Sorting with table rows

Click on the table header to sort on that column, a second click makes is switch between ASC / DESC.
As you can see, you can easily update the sort settings, handle the ASC / DESC and sort the elements exactly the way you want.

$( "tbody" ).sortedList({
	selector : "tr",
	sort : [
		function( el )
		{
			// Return an object, so you can pass the order and data to sort with
			return { 
				order : order ? "desc" : "asc" , 
				data : $( el ).find( "td" ).eq( columnIndex ).text( )
			};
		}
	]
});

$( "thead th" ).click( function(){
	var newColumnIndex = $( this ).index( );
	// Switch between ASC / DESC
	if( newColumnIndex == columnIndex ){
		order = !order;
	} else {
		columnIndex = newColumnIndex;
	}
	
	// Reorder
	$( "tbody" ).sortedList( "order" );
} );

Custom sorting

Sort on checked and second on the class 'x' ( style bold and red ) and third on the index.

$("#demo02").sortedList({
	sort : [
		// Sort on moved or not DESC
		//	Like you see data, you can use attr or whatever jQuery getter you want
		//	it calls functions like: a.data( "moved" ), a.attr( "moved" ), etc
		{ desc : { data : "moved" } },
		
		// Sort on the class "x"
		function( el ){
			return !$(el).hasClass( "x");
		},
		
		// Sort on the data index ASC (al-index is internal var for the initial index of an item)
		{ asc : { data : "al-index" } }
	]
});

// When checkbox change, move to top or back into position
$("#demo01, #demo02")
	.find( "input[type=checkbox]" )
		.each(function(){
			// Initial set moved to 0 because not moved
			$( this ).parent().data( "moved", 0 );
		})
		.change( function(){
			// Set moved, so we can sort on it
			$( this ).parent().data( "moved", $(this).is(":checked") );
			
			// Call function to reorder
			$("#demo01, #demo02").sortedList( "order" )
		});

How to use

Initializing:

$( "SELECTOR" ).sortedList( SETTINGS );

GET settings:

$( "SELECTOR" ).sortedList( KEY );

SET settings:

$( "SELECTOR" ).sortedList( KEY, VALUE );

CALL internal functions:

$( "SELECTOR" ).sortedList( FUNCTIONNAME );

Related plugins

• jQuery Fancyform

#Ideas

• Animate the updated items in the selection

#Licence

Fancyform dual licensed under the MIT and GPL licenses.