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:

examples

default sorting

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

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

sort on any node

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

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

sorted numbers

TinySort also works on numbers.

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

mixed literal and numeral

In a normal sort the order would be a1,a11,a2 while you'd really want it to be a1,a2,a11. TinySort corrects this:

$('ul#xmix>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). In this case sort is by href on the anchor sub-selection.

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

Another example: images sorted by attribute title value.

$('span#ximg>img').tsort({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.

$('ul#xsub>li').tsort('span:eq(1)');

The following example will only sort the non-striked elements.

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

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'});

non-latin characters

A normal array sorts according to Unicode, which is wrong for most languages. For correct ordering you can parse a rule with the 'charOrder' parameter. This is a string that consist of exceptions, not the entire alfabet. For characters that should sort equally use brackets. For characters that consist of multiple characters use curly braces. For example:

• cčć sorts c č and ć in that order

• æøå in absence of a latin character æ ø and å are sorted after z

• ι[ίϊΐ] ί ϊ and ΐ are sorted equally to ι

• d{dž} dž is sorted as one character after d

• å[{Aa}] Aa is sorted as one character, equal to å, after z

Here some real examples:

$('ul#greek>li').tsort({charOrder:'α[ά]βγδε[έ]ζη[ή]θι[ίϊΐ]κλμνξο[ό]πρστυ[ύϋΰ]φχψω[ώ]'});

$('ul#danish>li').tsort({charOrder:'æøå[{Aa}]'});

$('ul#serb>li').tsort({charOrder:'cčćd{dž}đl{lj}n{nj}sšzž'});

Here are some example languages:

sort $.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());
});

sort $.data()

Sort by data attribute by parsing the additional parameter 'data=dataName'.

$('ul#xdta>li').tsort('a',{data:'foo'});

sorted descending

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

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

randomize

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

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

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);
}});

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

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',$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);
});