SortedList

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

Now available on GitHub!

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.

What would be nice (and maybe in the future) would be that the demo would sort on 2 columns at once. This can easiliy be done by added and removing sort functions to the sort Array.

ID	Name
1	Fred
2	Angelique
3	Dorian
4	Alice
5	Niels

var columnIndex = order = 0;
	
$( "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" );
} );

Sorting with checkboxes in LI ( depending on multiple fields )

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

• A
• B
• C
• D
• E
• F
• G
• H

$("#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( "al-moved" ), a.attr( "al-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

License / Download

SortedList dual licensed under the MIT and GPL licenses.

Developers version | Minified version

Help us keep the projects running.