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).
Posted by martin on November 4th, 2003.
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).
Posted by martin on November 4th, 2003.
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!Posted by sil on November 4th, 2003.
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!
Posted by Scott Johnson on November 4th, 2003.
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‘;}
}
}
Posted by john on November 4th, 2003.
I thought this would work as we walk the rows in ts_resortTable but it isn’t:
newRows[i].className = “C” + (i%2);
Posted by john on November 4th, 2003.
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?
Posted by john on November 4th, 2003.
It’s Ruby, so you’re roughly 2.4 times more wrong than if it’d have been Python :-)
Posted by Jason on November 4th, 2003.
Beautiful work, as always. Thanks for sharing.
Posted by Adrian Holovaty on November 4th, 2003.
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. :)
Posted by sil on November 4th, 2003.
Stop it, y‘bugger, I want to carry on hating javascript :-)
Posted by Jason on November 4th, 2003.
Hi
Anyone has readymade dom for paging of data like google style.
Posted by T.Ullas on June 9th, 2004.
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/
Posted by Flemming Mahler on December 19th, 2004.
Flemming: cheers for the pointer. Nice code!
Posted by sil on December 19th, 2004.
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.
Posted by Dave Polaschek on December 19th, 2004.
how do I tell it not to add the sorting to a column?
Posted by Ches on August 16th, 2005.
This script is amazing!
one question:
Is there an easy way to ignore a row, say by class or id?
Posted by j.morgan on November 11th, 2005.
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?
Posted by trish on November 18th, 2005.
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.
Posted by Dean on January 23rd, 2006.
I’m looking for an easy-to-use sortable table that will read the data from and xml file? Anyone know of one?
Thanks
Posted by Ecanned on February 25th, 2006.
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
Posted by Norman Harebottle on October 2nd, 2006.
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
Posted by Norman Harebottle on October 2nd, 2006.
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
Posted by Norman Harebottle on October 2nd, 2006.
// Remainder of function!
for(i=0;i
Posted by Norman Harebottle on October 2nd, 2006.
function ts_aton($dottedIpStr) {
var result = 0;
var C = [16777216,65536,256,1];
var nums = $dottedIpStr.split(/\./g);
for(i=0;i
Posted by Norman Harebottle on October 2nd, 2006.
Ok, you’ll just have to e-mail me for the full source! (normanh+spam@gmail.com)
Posted by Norman Harebottle on October 2nd, 2006.
Hi
Really cool script.
Is it possible to ignore a certain number of rows at the bottom of the table where totals would go?
Posted by mcchots on October 16th, 2006.
mcchots: that’s what “sortbottom” is for…
Posted by sil on October 16th, 2006.
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.
Posted by Roy Vincent on July 6th, 2007.
Great script.
Is it possible to use the script if table headers are in a different table?
Posted by Federico on June 26th, 2008.
Federico: no, I’m afraid not. Drop me a mail if you want to talk about that.
Posted by sil on June 26th, 2008.
For right sorting IP addresses add this function at the end of script:
function inet_aton(a){
var octets = a.split(/\./);
while (octets.length < 4) octets.splice(1,0,0);
var n = 0;
for (var i = 0; i < 4; i++) n = (n * 256) + parseInt(octets[i]);
return n;
}
And put this after sort_numeric:
sort_ip: function(a,b) {
aa = inet_aton(a[0]);
bb = inet_aton(b[0]);
if (aa==bb) return 0;
if (aa<bb) return -1;
return 1;
},
Posted by Farid on June 29th, 2009.
For using IP sorting you have to set the class in of this column:
IP address
If you have problems if it mail me : farid D0T adigamov AT gmail D0T com
Posted by Farid on June 29th, 2009.
For using IP sorting you have to set the class in of this column:
<th class=”sorttable_ip”>IP address</th>
If you have problems if it mail me : farid D0T adigamov AT gmail D0T com
Posted by Farid on June 29th, 2009.