Sortable tables
I have been exhorted repeatedly to write more content. But if I did, would I be content? Love those puns. :)
Anyway, the Kryogenix House of Javascript Weirdness presents sortable tables, an unobtrusive DHTML library to allow you to make tabular data sortable by clicking on the headers.
It may or may not be the same codebase, but Plone has this out of the box (and has had for a year or so).
3 hours later
It may or may not be the same codebase, but http://www.plone.org has this out of the box (and has had for a year or so).
3 hours later
Jon,
A couple of things, glancing over your altcolor function:
Why not
function altcolor(tbl) {
for (var r=0;r
}
You need to add to the className, not replace it, or you’ll overwrite
sortbottomrows and similar. And you already have a table object with its rows attribute; there’s no need to fetch it back with its ID and TRs!3 hours later
That demo was absolutely the fastest sorting of a table on the web that I’ve ever experienced. That blows away any ActiveX garbage just for the simple fact that I don’t have to wait for the ActiveX to load. Bravo! Well done!
3 hours later
OK, sorry to hijack the thread, but I did manage to get this working in a rather kludgy way by adding a function call at the end of ts_resortTable. I’d be open to a simpler approach.
function ts_resortTable(lnk) {
…
…
altcolor(table);
span.innerHTML = ARROW;
}
function altcolor(tbl) {
var row=document.getElementById(tbl.id).getElementsByTagName(‘tr‘)
var l=row.length
for (i=0;i
if (i%2 == 0){row[i].className=‘C0‘}
else {r[i].className=‘C1‘;}
}
}
3 hours later
I thought this would work as we walk the rows in ts_resortTable but it isn’t:
newRows[i].className = “C” + (i%2);
3 hours later
Brilliant! In my tables I’m coloring alternating rows using class=“C0” or “C1” on a row. I can’t figure out how to keep the pattern correct when a sort has been applied. Any ideas?
3 hours later
It’s Ruby, so you’re roughly 2.4 times more wrong than if it’d have been Python :-)
3 hours later
Beautiful work, as always. Thanks for sharing.
3 hours later
Javascript is bleedin’ brilliant. Brilliant, I tell you. It got a bad rep from all the status bar scrollers and stuff, but we damned well ought to reclaim it from people doing lame stuff and put it to real work. More powerful than your favourite language, I bet, unless your favourite language is Perl, in which case it’s more readable and usable, or unless it’s Python, in which case I’m wrong. :)
3 hours later
Stop it, y‘bugger, I want to carry on hating javascript :-)
3 hours later
Hi
Anyone has readymade dom for paging of data like google style.
31 weeks later
sorttable.js is pretty cool, but we’ve been using a hacked version – sorttable_colored.js – available from http://uzilla.net/uzilla/blog/credits.cfm which makes alternating row coloring in the table rows.
Today we just switched to another version – sorttable_colored_cookie.js – which uses cookies to remember the most recent sorting used.
It’s available from:
http://netfactory.dk/technology/markup/javascript/
58 weeks later
Flemming: cheers for the pointer. Nice code!
58 weeks later
Hmm. It doesn’t seem to work in Safari. That seems a shame. The small static WebFX version with hidden headers and buttons does work, but Safari doesn’t seem to like any of the versions where you directly click the headers.
58 weeks later
how do I tell it not to add the sorting to a column?
93 weeks later
This script is amazing!
one question:
Is there an easy way to ignore a row, say by class or id?
105 weeks later
i love this script and it works great for my purposes, but a MAC owner told me it doesn’t work properly. he said when he clicks on a header to sort, it sorts the first few properly, but then sorts randomly after that. any ideas?
106 weeks later
It seems to have a “problem” on IE6 where if all the contents of a column are the same, you get an ugly error icon in the status bar. Obviously it doesn’t change the way the page works, but it makes you look bad.
Apart from that it’s great, thanks.
115 weeks later
I’m looking for an easy-to-use sortable table that will read the data from and xml file? Anyone know of one?
Thanks
120 weeks later
Hello,
I found this to be a REALLY great tool and decided to add proper support for sorting IP Addresses. I just convert a dotted decimal IP address into an integer value and sort on that. It actually works pretty fast considering. It could probably be optimized more but it works for me.
I added the following line in the ts_resortTable(lnk,clid) function at the bottom of the list of other similar statements:
if (itm.match(/^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}/)) sortfn = ts_sort_ip_address;
Then I added the functions here at appropriate spaces for clarity:
function ts_sort_ip_address(a,b) {
aa = ts_aton(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
bb = ts_aton(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
if(aa==bb) return 0;
if(aa
151 weeks later
function ts_sort_ip_address(a,b) {
aa = ts_aton(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
bb = ts_aton(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
if(aa==bb) return 0;
if(aa
151 weeks later
Sorry for the multiple posts. Apparently there is a limited length!
And also the function below to finish things out:
function ts_aton($dottedIpStr) {
var result = 0;
var C = [16777216,65536,256,1];
var nums = $dottedIpStr.split(/\./g);
for(i=0;i
151 weeks later
// Remainder of function!
for(i=0;i
151 weeks later
function ts_aton($dottedIpStr) {
var result = 0;
var C = [16777216,65536,256,1];
var nums = $dottedIpStr.split(/\./g);
for(i=0;i
151 weeks later
Ok, you’ll just have to e-mail me for the full source! (normanh+spam@gmail.com)
151 weeks later
Hi
Really cool script.
Is it possible to ignore a certain number of rows at the bottom of the table where totals would go?
153 weeks later
mcchots: that’s what “sortbottom” is for…
153 weeks later
Great script! Very usable. I was thinking if there’s anyway that it can’t while ignoring the case. Currently items with lower case goes AFTER those that starts with an upper case.
191 weeks later
Great script.
Is it possible to use the script if table headers are in a different table?
242 weeks later
Federico: no, I’m afraid not. Drop me a mail if you want to talk about that.
242 weeks later