SelSo 1.0 - a Selection Sorter

This is selso, a selection sorter plugin for jQuery.

The need for this plugin came to me when I needed list elements to be reordered on the client-side according to different information they displayed (id est a name of a person and her age).

This plugin allows you to re-order any jquery selection within their own parent element. It's particularly intended for lists in my case, but you can reorder paragraphs inside of divs, spans inside of paragraphs, even rows inside of tables, although in that case you might prefer to take a look at the tablesorter plugin.

The little example given here gives a good overview of what the plugin will do, and how to use it.

Note : anybody also looking for a stable sorting function in firefox, i did one in this plugin, it's $.selso.stablesort.


Example

List 1

Sort this list

List 2

Sort this list

Sort the checked lists by


Order direction : Asc | Desc

You might need at the source code to check exactly what the 'id' button is doing : it's sorting the li's according to their id attribute, which goes like : liX or laX where X is a number from 1 to 12.

Each of this button is attached with one of these functions below. As you can sse in the last one, you can specify an extract function, that will use the current element of the jquery selection to build the corresponding value that will later be sorted.

The inline doc of the source file will also tell you about a way to specify an ordering function to give to the Array.sort() method, which is used to perform the sorting.

var options;

var selso = function(){
	$.extend(options,{direction:$(':radio:checked').val()});
	$(':checkbox:checked').next('ul').find('li').selso(options);
};

var orderByNum=function(){
	options = {type:'num',orderBy:'span.num'};
	selso();
};

var orderByAlpha=function(){
	options = {type:'alpha',orderBy:'span.alpha'};
	selso();
};

var orderByAccents=function(){
	options = {type:'accents',orderBy:'span.alpha'};
	selso();
};

var orderById = function(){
	options = {
		type:'num',
		extract:function(o){return $(o).attr('id').substring(2);}
	};
	selso();
};

var orderByLength = function(){
	options = {
		type:'num',
		extract:function(o){return $('span.alpha',o).text().length;}
	};
	selso();
};

Any suggestion or remark greatly appreciated.


subtenante aat yahoo doot fr
Last modified: Fri Sep 18 12:04:55 China Standard Time 2007