A Real-time Javascript class library for table sorting

A Javascript class library used to sort table content. It is easy to use and does not need to call the database every time.
It is particularly suitable for sorting multi-table queries. With the style. display switch of <tbody>, you can also implement paging.
Effect demonstration
Usage:
1. Add JS
<SCRIPT src = "sorttable. js" type = "text/javascript"> </SCRIPT>
2. Add a TABLE. Note that the TABLE must have an ID and the class is "sortable"
<Table class = "sortable" id = "mytable">
OK, you can. It's simple.
If you think it is too monotonous, add CSS by yourself. The official website provides CSS for HEAD change.

/* Sortable tables */
Table. sortable a. sortheader {
Background-color: # eee;
Color: #666666;
Font-weight: bold;
Text-decoration: none;
Display: block;
}
Table. sortable span. sortarrow {
Color: black;
Text-decoration: none;
}

Copy codeThe Code is as follows:
AddEvent (window, "load", sortables_init );

Var SORT_COLUMN_INDEX;

Function sortables_init (){
// Find all tables with class sortable and make them sortable
If (! Document. getElementsByTagName) return;
Tsung = document. getElementsByTagName ("table ");
For (ti = 0; ti <tstrap. length; ti ++ ){
ThisTbl = Tsung [ti];
If (''+ thisTbl. className +''). indexOf ("sortable ")! =-1) & (thisTbl. id )){
// InitTable (thisTbl. id );
Ts_makeSortable (thisTbl );
}
}
}

Function ts_makeSortable (table ){
If (table. rows & table. rows. length> 0 ){
Var firstRow = table. 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 );
Cell. innerHTML = '<a href = "#" class = "sortheader"' +
'Onclick = "ts_resortTable (this, '+ I +'); return false;"> '+
Txt + '<span class = "sortarrow"> </span> </a> ';
}
}

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 ){
// Get the span
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 table = getParent (td, 'table ');

// Work out a type for the column
If (table. rows. length <= 1) return;
Var itm = ts_getInnerText (table. rows [1]. cells [column]);
Sortfn = ts_sort_caseinsensitive;
If (itm. match (/^ \ d [\/-] \ d [\/-] \ d $/) sortfn = ts_sort_date;
If (itm. match (/^ \ d [\/-] \ d [\/-] \ d $/) sortfn = ts_sort_date;
If (itm. match (/^ [?] /) Sortfn = ts_sort_currency;
If (itm. match (/^ [\ d \.] + $/) sortfn = ts_sort_numeric;
SORT_COLUMN_INDEX = column;
Var firstRow = new Array ();
Var newRows = new Array ();
For (I = 0; I <table. rows [0]. length; I ++) {firstRow [I] = table. rows [0] [I];}
For (j = 1; j <table. rows. length; j ++) {newRows [J-1] = table. rows [j];}

NewRows. sort (sortfn );

If (span. getAttribute ("sortdir") = 'low '){
ARROW = 'row ';
NewRows. reverse ();
Span. setAttribute ('sortdir', 'up ');
} Else {
ARROW = 'row ';
Span. setAttribute ('sortdir', 'low ');
}

// 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) table. 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) table. 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 = '';
}
}
}

Span. innerHTML = ARROW;
}

Function getParent (el, pTagName ){
If (el = null) return null;
Else if (el. nodeType = 1 & el. tagName. toLowerCase () = pTagName. toLowerCase () // Gecko bug, supposed to be uppercase
Return el;
Else
Return getParent (el. parentNode, pTagName );
}
Function ts_sort_date (a, B ){
// Y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX
Aa = ts_getInnerText (a. cells [SORT_COLUMN_INDEX]);
Bb = ts_getInnerText (B. cells [SORT_COLUMN_INDEX]);
If (aa. length = 10 ){
Dt1 = aa. substr (6, 4) + aa. substr (3, 2) + aa. substr (0, 2 );
} Else {
Yr = aa. substr (6, 2 );
If (parseInt (yr) <50) {yr = '20' + yr;} else {yr = '19' + yr ;}
Dt1 = yr + aa. substr (3, 2) + aa. substr (0, 2 );
}
If (bb. length = 10 ){
Dt2 = bb. substr (6, 4) + bb. substr (3, 2) + bb. substr (0, 2 );
} Else {
Yr = bb. substr (6, 2 );
If (parseInt (yr) <50) {yr = '20' + yr;} else {yr = '19' + yr ;}
Dt2 = yr + bb. substr (3, 2) + bb. substr (0, 2 );
}
If (dt1 = dt2) return 0;
If (dt1 <dt2) return-1;
Return 1;
}

Function ts_sort_currency (a, B ){
Aa = ts_getInnerText (a. cells [SORT_COLUMN_INDEX]). replace (/[^ 0-9.]/g ,'');
Bb = ts_getInnerText (B. cells [SORT_COLUMN_INDEX]). replace (/[^ 0-9.]/g ,'');
Return parseFloat (aa)-parseFloat (bb );
}

Function ts_sort_numeric (a, B ){
Aa = parseFloat (ts_getInnerText (a. cells [SORT_COLUMN_INDEX]);
If (isNaN (aa) aa = 0;
Bb = parseFloat (ts_getInnerText (B. cells [SORT_COLUMN_INDEX]);
If (isNaN (bb) bb = 0;
Return aa-bb;
}

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 cocould not be removed ");
}
}