SortedList is a jQuery plugin to sort a list of DOM elements the way you want.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

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.

	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: "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]" )
			// 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


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

GET settings:

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

SET settings:

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

CALL internal functions:

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

Related plugins


  • Animate the updated items in the selection


Fancyform dual licensed under the MIT and GPL licenses.