TinySort will sort any nodetype by it's text- or attribute value, or by that of one of it's children.

You can download TinySort as zip or do a repository checkout. If you stumble upon anything out of the ordinary you can file them here.

download

The examples below should help getting you on your way.

usage

The first parse in the tsort function can either be nothing...

$("li").tsort();
$("ul#people>li").tsort();

a string (as you would in find)...

$("ul#people>li").tsort("span.surname");

a 'settings' object...

$("ul#people>li").tsort({place:"end"});

or both...

$("ul#people>li").tsort("img",{order:"desc",attr:"alt"});

Change default settings globally like so:

$.tinysort.defaults.order = "desc";
$.tinysort.defaults.attr = "title";

TinySort has a number of settings:

property	type	description	possible values	default
order	String	the order of the sorting method	asc ascending order desc descending order rand random order	"asc"
attr	String	order by attribute value (ie title, href, class)	anything	""
useVal	Boolean	use element value instead of text	false use text true use value	false
data	String	use the data attribute for sorting	null use text String use data attribute	null
place	String	determines the placement of the ordered elements in respect to the unordered elements filtered out by using the 'attr' setting or the first parsed 'find' string	start sorted elements are prepended at the parent attribute end sorted elements are appended at the parent attribute org placement occurs at the positions the sortable elements are found first elements are appended after the first occurance of a sortable element	"start"
returns	Boolean	affects the returned jquery array	false all elements are returned true only sorted elements are returned	false
cases	Boolean	a case sensitive sort (orders [aB,aa,ab,bb])	false cases are ignored true case sensitive sort	false
sortFunction	function	override the default sort function	any sort function like function(a,b){return -1,0,1;} where the two parameters are objects with the following properties: e jQuery object n original order s string to sort	...

examples

default sorting

The default sort is done by simply calling the 'tsort' function onto your selection.

$('ul#xdflt>li').tsort();

sorted by attribute value

Sort by attribute value by parsing the additional parameter 'attr=attributeName'. This will sort by attribute of, either the jquery selection, or of the sub-selection (if provided).

$('ul#xval>li').tsort('a[title]',{attr:'title'});

sorted by sub-selection

You can provide an additional subselection by parsing a jquery sub-selection string into the tsort function. The returned array will be in the newly sorted order.
In this example the list elements are sorted to the text of the second span and a number is prepended.

$('ul#xsub>li').tsort('span:eq(1)').each(function(i){$(this).prepend(i+': ')});

sorted with attribute

You can provide an additional subselection by parsing a jquery sub-selection string into the tsort function. The following will only sort the non-striked elements.

$('ul#xattr>li').tsort('span[class!=striked]');

sorted by .val()

The .val() method is primarily used to get the values of form elements. By parsing the useVal attribute you can also sort by this form element value. Everything is in the first line, I added some extra code to show the values it sorts on.

$('ul#xinp>li').tsort('>input,>select',{useVal:true}).each(function(i,el){
	var $Li = $(el);
	$Li.find('span').text(' : '+$Li.find('>input,>select').filter(':eq(0)').val());
	console.log('$Li.find(span):',$Li.find('span').length);
});

return only sorted elements

By default, all the elements are returned, even the ones excluded by your sub-selection. By parsing the additional parameter 'returns=true' only the sorted elements are returned.
You can also adjust the placement of the sorted values by adding the 'place' attribute. In this case the original positions are maintained.

$('ul#xret>li').tsort('span[class!=striked]',{returns:true,place:'org'}).css({color:'red'});

sorted descending

Sort by ascending or descending order by parsing the additional 'order="desc"/"asc"' parameter.

$('ul#xdesc>li').tsort('',{order:'desc'});

sort on any node

TinySort works on any nodeType. The following is a div with spans.

$('div#xany>span').tsort('',{order:'desc'});

images sorted by title

Sort by attribute title value.

$('span#ximg>img').tsort({attr:'title'});

sorted numbers

TinySort also works on numbers.

$('ul#xnum>li').tsort();

parsing a custom sort function

Custom sort functions are similar to those you use with regular Javascript arrays with the exception that the parameters a and b are objects of a similar type. These objects contains three variables: a variable 'e' containing the jQuery object of the element passing through the sort, an integer 'n' containing the original order of the element, and a string 's' containing the string value we want to sort. The latter is not necessarily the text value of the node, should you parse the 'attr' property then 's' will contain the value of that property.

$('ul#xcst li').tsort('',{sortFunction:function(a,b){
	var iCalcA = parseInt(a.s)%16;
	var iCalcB = parseInt(b.s)%16;
	return iCalcA===iCalcB?0:(iCalcA>iCalcB?1:-1);
}});

randomize

TinySort can also order randomly (or is that a contradiction).

$('ul#xrnd li').tsort('',{order:'rand'});

sorting tables

With a little extra code you can create a sortable table. The anchors in this table header call the function sortTable which basicly does this:

var aAsc = [];
function sortTable(nr) {
	aAsc[nr] = aAsc[nr]=='asc'?'desc':'asc';
	$('#xtable>tbody>tr').tsort('td:eq('+nr+')[abbr]',{order:aAsc[nr]});
}

Note that the mixed column only sorts those rows of which the td's have the abbr attribute set, and because of the default place value the non-sorted elements always remain at the bottom

word	int	float	mixed	mixed	add row

animated sorting

Tinysort has no built in animating features but it can quite easily be accomplished through regular js/jQuery.

var $Ul = $('ul#xanim');
$Ul.css({position:'relative',height:$Ul.height(),display:'block'});
var iLnH;
var $Li = $('ul#xanim>li');
$Li.each(function(i,el){
	var iY = $(el).position().top;
	$.data(el,'h',iY);
	if (i===1) iLnH = iY;
});
$Li.tsort().each(function(i,el){
	var $El = $(el);
	var iFr = $.data(el,'h');
	var iTo = i*iLnH;
	$El.css({position:'absolute',top:iFr}).animate({top:iTo},500);
});

known issues

• Selecting from multiple parent nodes (ie. "li" in a nested tree) might have some unexpected results.
• Mixed numeral and literal values sort as literal. So ["pic11","pic2","pic1"] will result in ["pic1","pic11","pic2"].