Solved

Fix Javascript table sorting problem

Posted on 2009-04-10
8
713 Views
Last Modified: 2012-05-06
2 issues:

1) Numbers are not sorted numerically, but alpha
2) All table columns are aligned right, even with align="left"


While  working on a prototype and using the sorttable js (from Yoast http://yoast.com/articles/sortable-table/), I noticed the
numbers not being sorted correctly (they are being sorted alpha instead of
numeric). I see a couple other comments about the same problem, with no solution. I downloaded the latest US version 1.5.7. Using our original sorttable (kryogenix version) it
works fine but we would like to us this one to get dynamic alternating colors, nice arrows
etc..

We tried options from the original script like class="sorttable_numeric" and
sorttable_customkey - but it still won't sort correctly.

The test page and where we can reproduce the problem is:
http://test.mffais.com/123639 scroll down and sort on "shares" to see the
problem.

The javascript file is at http://test.mffais.com/sorttable.js

Any ideas? Thanks.
/*

Table sorting script  by Joost de Valk, check it out at http://www.joostdevalk.nl/code/sortable-table/.

Based on a script from http://www.kryogenix.org/code/browser/sorttable/.

Distributed under the MIT license: http://www.kryogenix.org/code/browser/licence.html .
 

Copyright (c) 1997-2007 Stuart Langridge, Joost de Valk.
 

Version 1.5.7

*/
 

/* You can change these values */

var image_path = "/";

var image_up = "arrow-up.gif";

var image_down = "arrow-down.gif";

var image_none = "arrow-none.gif";

var europeandate = false;

var alternate_row_colors = true;
 

/* Don't change anything below this unless you know what you're doing */

addEvent(window, "load", sortables_init);
 

var SORT_COLUMN_INDEX;

var thead = false;
 

function sortables_init() {

        // Find all tables with class sortable and make them sortable

        if (!document.getElementsByTagName) return;

        tbls = document.getElementsByTagName("table");

        for (ti=0;ti<tbls.length;ti++) {

                thisTbl = tbls[ti];

                if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {

                        ts_makeSortable(thisTbl);

                }

        }

}
 

function ts_makeSortable(t) {

        if (t.rows && t.rows.length > 0) {

                if (t.tHead && t.tHead.rows.length > 0) {

                        var firstRow = t.tHead.rows[t.tHead.rows.length-1];

                        thead = true;

                } else {

                        var firstRow = t.rows[0];

                }

        }

        if (!firstRow) return;

       

        // We have a first row: assume it's the header, and make its contents clickable links

        for (var i=0;i<firstRow.cells.length;i++) {

                var cell = firstRow.cells[i];

                var txt = ts_getInnerText(cell);

                if (cell.className != "unsortable" && cell.className.indexOf("unsortable") == -1) {

                        cell.innerHTML = '<a href="#" class="sortheader" onclick="ts_resortTable(this, '+i+');return false;">'+txt+'

<span class="sortarrow">&nbsp;&nbsp;<img src="'+ image_path + image_none + '" alt="&darr;"/></span></a>';

                }

        }

        if (alternate_row_colors) {

                alternate(t);

        }

}
 

function ts_getInnerText(el) {

        if (typeof el == "string") return el;

        if (typeof el == "undefined") { return el };

        if (el.innerText) return el.innerText;  //Not needed but it is faster

        var str = "";

        

        var cs = el.childNodes;

        var l = cs.length;

        for (var i = 0; i < l; i++) {

                switch (cs[i].nodeType) {

                        case 1: //ELEMENT_NODE

                                str += ts_getInnerText(cs[i]);

                                break;

                        case 3: //TEXT_NODE

                                str += cs[i].nodeValue;

                                break;

                }

        }

        return str;

}
 

function ts_resortTable(lnk, clid) {

        var span;

        for (var ci=0;ci<lnk.childNodes.length;ci++) {

                if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];

        }

        var spantext = ts_getInnerText(span);

        var td = lnk.parentNode;

        var column = clid || td.cellIndex;

        var t = getParent(td,'TABLE');

        // Work out a type for the column

  if (t.rows.length <= 1) return;

        var itm = "";

        var i = 0;

        while (itm == "" && i < t.tBodies[0].rows.length) {

                var itm = ts_getInnerText(t.tBodies[0].rows[i].cells[column]);

                itm = trim(itm);

                if (itm.substr(0,4) == "<!--" || itm.length == 0) {

                        itm = "";

                }

                i++;

        }

        if (itm == "") return; 

        sortfn = ts_sort_caseinsensitive;

/*      if (itm.match(/^\d\d[\/\.-][a-zA-z][a-zA-Z][a-zA-Z][\/\.-]\d\d\d\d$/)) sortfn = ts_sort_date;

        if (itm.match(/^\d\d[\/\.-]\d\d[\/\.-]\d\d\d{2}?$/)) sortfn = ts_sort_date;

*/

        if (itm.match(/^-?[£$<80>Û¢´]\d/)) sortfn = ts_sort_numeric;

        if (itm.match(/^-?(\d+[,\.]?)+(E[-+][\d]+)?%?$/)) sortfn = ts_sort_numeric;

        SORT_COLUMN_INDEX = column;

        var firstRow = new Array();

        var newRows = new Array();

        for (k=0;k<t.tBodies.length;k++) {

                for (i=0;i<t.tBodies[k].rows[0].length;i++) { 

                        firstRow[i] = t.tBodies[k].rows[0][i]; 

                }

        }

        for (k=0;k<t.tBodies.length;k++) {

                if (!thead) {

                        // Skip the first row

                        for (j=1;j<t.tBodies[k].rows.length;j++) { 

                                newRows[j-1] = t.tBodies[k].rows[j];

                        }

                } else {

                        // Do NOT skip the first row

                        for (j=0;j<t.tBodies[k].rows.length;j++) { 

                                newRows[j] = t.tBodies[k].rows[j];

                        }

                }

        }

        newRows.sort(sortfn);

        if (span.getAttribute("sortdir") == 'down') {

                        ARROW = '&nbsp;&nbsp;<img src="'+ image_path + image_down + '" alt="&darr;"/>';

                        newRows.reverse();

                        span.setAttribute('sortdir','up');

        } else {

                        ARROW = '&nbsp;&nbsp;<img src="'+ image_path + image_up + '" alt="&uarr;"/>';

                  span.setAttribute('sortdir','down');

        } 

    // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones

    // don't do sortbottom rows

    for (i=0; i<newRows.length; i++) { 

                if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) {

                        t.tBodies[0].appendChild(newRows[i]);

                }

        }

    // do sortbottom rows only

    for (i=0; i<newRows.length; i++) {

                if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) 

                        t.tBodies[0].appendChild(newRows[i]);

        }

        // Delete any other arrows there may be showing

        var allspans = document.getElementsByTagName("span");

        for (var ci=0;ci<allspans.length;ci++) {

                if (allspans[ci].className == 'sortarrow') {

                        if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?

                                allspans[ci].innerHTML = '&nbsp;&nbsp;<img src="'+ image_path + image_none + '" alt="&darr;"/>';

                        }

                }

        }               

        span.innerHTML = ARROW;

        alternate(t);

}
 

function getParent(el, pTagName) {

        if (el == null) {

                return null;

        } else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) {

                return el;

        } else {

                return getParent(el.parentNode, pTagName);

        }

}
 

function sort_date(date) {      

        // y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX

        dt = "00000000";

        if (date.length == 11) {

                mtstr = date.substr(3,3);

                mtstr = mtstr.toLowerCase();

                switch(mtstr) {

                        case "jan": var mt = "01"; break;

                        case "feb": var mt = "02"; break;

     case "mar": var mt = "03"; break;

                        case "apr": var mt = "04"; break;

                        case "may": var mt = "05"; break;

                        case "jun": var mt = "06"; break;

                        case "jul": var mt = "07"; break;

                        case "aug": var mt = "08"; break;

                        case "sep": var mt = "09"; break;

                        case "oct": var mt = "10"; break;

                        case "nov": var mt = "11"; break;

                        case "dec": var mt = "12"; break;

                        // default: var mt = "00";

                }

                dt = date.substr(7,4)+mt+date.substr(0,2);

                return dt;

        } else if (date.length == 10) {

                if (europeandate == false) {

                        dt = date.substr(6,4)+date.substr(0,2)+date.substr(3,2);

                        return dt;

                } else {

                        dt = date.substr(6,4)+date.substr(3,2)+date.substr(0,2);

                        return dt;

                }

        } else if (date.length == 8) {

                yr = date.substr(6,2);

                if (parseInt(yr) < 50) { 

                        yr = '20'+yr; 

                } else { 

                        yr = '19'+yr; 

                }

                if (europeandate == true) {

                        dt = yr+date.substr(3,2)+date.substr(0,2);

                        return dt;

                } else {

                        dt = yr+date.substr(0,2)+date.substr(3,2);

                        return dt;

                }

        }

        return dt;

}
 

function ts_sort_date(a,b) {

        dt1 = sort_date(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));

        dt2 = sort_date(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));

        

        if (dt1==dt2) {

                return 0;

   }

        if (dt1<dt2) { 

                return -1;

        }

        return 1;

}

function ts_sort_numeric(a,b) {

        var aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);

        aa = clean_num(aa);

        var bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);

        bb = clean_num(bb);

        return compare_numeric(aa,bb);

}

function compare_numeric(a,b) {

        var a = parseFloat(a);

        a = (isNaN(a) ? 0 : a);

        var b = parseFloat(b);

        b = (isNaN(b) ? 0 : b);

        return a - b;

}

function ts_sort_caseinsensitive(a,b) {

        aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();

        bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();

        if (aa==bb) {

                return 0;

        }

        if (aa<bb) {

                return -1;

        }

        return 1;

}

function ts_sort_default(a,b) {

        aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);

        bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);

        if (aa==bb) {

                return 0;

        }

        if (aa<bb) {

                return -1;

        }

        return 1;

}

function addEvent(elm, evType, fn, useCapture)

// addEvent and removeEvent

// cross-browser event handling for IE5+,       NS6 and Mozilla

// By Scott Andrew

{

        if (elm.addEventListener){

                elm.addEventListener(evType, fn, useCapture);

                return true;

        } else if (elm.attachEvent){

                var r = elm.attachEvent("on"+evType, fn);

                return r;

        } else {

                alert("Handler could not be removed");

        }

}

function clean_num(str) {

        str = str.replace(new RegExp(/[^-?0-9.]/g),"");

        return str;

}

function trim(s) {

        return s.replace(/^\s+|\s+$/g, "");

}

function alternate(table) {

        // Take object table and get all it's tbodies.

        var tableBodies = table.getElementsByTagName("tbody");

        // Loop through these tbodies

        for (var i = 0; i < tableBodies.length; i++) {

                // Take the tbody, and get all it's rows

                var tableRows = tableBodies[i].getElementsByTagName("tr");

                // Loop through these rows

                // Start at 1 because we want to leave the heading row untouched

                for (var j = 0; j < tableRows.length; j++) {

                        // Check if j is even, and apply classes for both possible results

                        if ( (j % 2) == 0  ) {

                                if ( !(tableRows[j].className.indexOf('odd') == -1) ) {

                                        tableRows[j].className = tableRows[j].className.replace('odd', 'even');

                                } else {

                                        if ( tableRows[j].className.indexOf('even') == -1 ) {

                                                tableRows[j].className += " even";

                                        }

                                }

                        } else {

                                if ( !(tableRows[j].className.indexOf('even') == -1) ) {

                                        tableRows[j].className = tableRows[j].className.replace('even', 'odd');

                                } else {

                                        if ( tableRows[j].className.indexOf('odd') == -1 ) {

                                                tableRows[j].className += " odd";

                                        }

                                }

                        } 

            }

        }

}

Open in new window

0
Comment
Question by:surfsideinternet
  • 4
  • 2
  • 2
8 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24121763
alignment:
table.sortable th, table.sortable td {
  text-align: right;


that would align everything right.

Which cols do not sort and do you only have actual numbers in them or ae the numbers wrapped in html somehow, like links
0
 
LVL 4

Expert Comment

by:ewest02
ID: 24122916
The sort script is wrong.

sorttable.js
103    if (itm == "") return;           <--- at this point tm contains the column heading (eg "Shares Change"
104    sortfn = ts_sort_caseinsensitive;

...and so the tm.match() will not see the tokens that indicate a numeric sort ("£$¬Û¢")

The sort must depend on row+1 not the current row triggering the sort event.

By the way, install firebug for firefox. It will be your friend for tracking down these kinds of bugs. :-)

  --Eric
0
 

Author Comment

by:surfsideinternet
ID: 24124172
ewest02,

So what should the line be?
0
 

Author Comment

by:surfsideinternet
ID: 24124362
Got the alignment straight, still need help with the sorttable javascript.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 4

Accepted Solution

by:
ewest02 earned 250 total points
ID: 24124493
94   var i = 0;      <-- set this to 1 so you scan the rows after the heading

  --Eric
0
 

Author Closing Comment

by:surfsideinternet
ID: 31569112
Thanks, it works great now!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24124572
Was my alignment comment useful?
0
 

Author Comment

by:surfsideinternet
ID: 24124584
mplungjan,

Unfortunately no, it didn't help. I already had similiar statements in the default styles.  I ended up having to put   style="text-align:left;" in each individual <Td> and <Th> that I wanted left justified and leave the rest  of the columns the default right justified. That was the only way that I could get it to work.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article will show, step by step, how to integrate R code into a R Sweave document
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now