what is your best recommendation for table sorting with jQuery
i have a very simple, manually updated table, 4 columns
Facility Name, Phone #, City, Specialty
i want the user to be able to sort by Facility name, and City only.
there are so many out there, with so many unnecessary bells and whistles...
your thought?
By far, the easiest one I've used is: http://datatables.net/
Amazingly simple...just make sure if you go the DOM replacement route (IE, building a table and letting DataTables reformat it) then make sure to format your table with and or it won't work. That's about the only gotcha.
There's also support for AJAX, etc. As with all really good pieces of code, it's also VERY easy to turn it all off. You'd be suprised what you might use, though. I started with a "bare" DataTable that only sorted one field and then realized that some of the features were really relevant to what I'm doing. Clients LOVE the new features.
Bonus points to DataTables for full ThemeRoller support....
I've also had ok luck with tablesorter, but it's not nearly as easy, not quite as well documented, and has only ok features.
If you want to avoid all the bells and whistles then may I suggest this simple sortElements plugin. Usage:
var table = $('table');
$('#facility_header, #city_header')
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
});
And a demo. (click the "city" and "facility" column-headers to sort)