Javascript tables with scroll bars have fixed titles and sorting functions.

Copy codeThe Code is as follows: // usage requirements:
// 1. Name the Class in the table sorttableHold,
// 2. Place the table in a div. This div has the overflow attribute.
// 3. the table must have an ID and the div must have an ID.
// 4. The JQuery. min. js file is required.
// 5. OK.

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 ("sorttableHold ")! =-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> ';
}
If (table! = Undefined) // separate
{
$ ('<Div id = "' + table. id + 'title "> </div> '). insertBefore ('#' + table. parentNode. parentNode. id); // create a DIV
Var div_title = document. getElementById (table. id + 'title ');
Var title = table. cloneNode (true) // copy all to the title
For (I = title. rows. length-1; I> 0; I --) // delete all the content in the title, leaving only the first line, that is, the title
Title. deleteRow (I)
Table. deleteRow (0) // Delete the first row (title) in the GridView, and only the content is available.
Div_title.appendChild (title) // title to div
$ ("#" + Div_title.id + "table: eq (0)"). attr ("id", div_title.id + "1 ");
$ (Table). removeAttr ("class ");
}

}
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 ++) {// obtain the Span
If (lnk. childNodes [ci]. tagName & lnk. childNodes [ci]. tagName. toLowerCase () = 'span ') span = lnk. childNodes [ci];
}
Var spantext = ts_getInnerText (span); // The title Span content.
Var td = lnk. parentNode; // Cell
Var column = clid | td. cellIndex; // column
Var tablecurrent = getParent (td, 'table'); // TABLE
Var tableid = tablecurrent. id. substring (0, tablecurrent. id. length-6 );
Var table = document. getElementById (tableid );
// Work out a type for the column
If (table. rows. length <= 1) return;
Var itm = ts_getInnerText (table. rows [0]. 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 = 0; j <table. rows. length; j ++) {newRows [j] = 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;
$ ('#' + Tableid + 'tr: even'mirror.css ("background-color", "FFF7E8 ");
$ ('#' + Tableid + 'tr: odd'hangzhou.css ("background-color", "# CCE8CF ");
}

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 ");
}
}