SortedList is a jQuery plugin to sort a list of DOM elements the way you want.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dev
.gitattributes
.gitignore
README.md
SortedList.jquery.json

README.md

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

#Ideas

  • Animate the updated items in the selection

#Licence

Fancyform dual licensed under the MIT and GPL licenses.