<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3c.org/TR/1999/REC-html401-19991224/ Loose.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><title>javascript implement customizable sort tables- </TITLE> <meta http-equiv=content-type content= "text/html; charset=gb2312 "> <style type=text/css>body {font-size:0.8em; Font-family:trebuchet MS, Lucida Sans Unicode, Arial, Sans-serif} P {font-weight:bold; margin-bottom:0px}. Tablewidget_headercell {border-right: #aca899 1px solid; Border-left: #fff 1px solid; Cursor:pointer; Border-bottom: #c5c2b2 3px solid; Background-color: #ece9d8}. tablewigdet_headercellover {border-right: #aca899 1px solid; Border-left: #fff 1px solid; Cursor:pointer; Border-bottom: #c5c2b2 3px solid; Background-color: #ece9d8}. Tablewigdet_headercelldown {border-right: #aca899 1px solid; Border-left: #fff 1px solid; Cursor:pointer; Border-bottom: #c5c2b2 3px solid; Background-color: #ece9D8}. Tablewidget_headercell {border-top: #ece9d8 2px solid}. Tablewigdet_headercellover {border-top: #ffc83c 2p X solid} tablewidget tbody. tablewidget_datarollover {background-color: #fff}. tablewigdet_headercelldown {BORD Er-right: #fff 1px solid; Border-top: #ffc83c 2px solid; Border-left: #aca899 1px solid; Background-color: #dbd8c5} tablewidget TD {padding-right:2px; padding-left:2px; padding-bottom:2px; margin:0px; padding-top:2px; Border-bottom: #eae9e1 1px solid}. Tablewidget Tbody {background-color: #fff}. tablewidget {font-size:12px; width:400px; Font-family:arial} div.widget_tablediv {border-right: #aca899 1px solid; Border-top: #aca899 1px solid; Overflow-y: auto; Border-left: #aca899 1px solid; width:400px; Border-bottom: #aca899 1px solid; height:200px} HTML > Body div.widget_tablediv {overflow:hidden; width:400px}. tablewidget THEAD {position:relative} tablewidget THEAD TR {bottom:0px; Position:relative; top:0px} tablewidget. scrollingcontent {overflow-y: auto; width:100%} </STYLE> <script type=text/javascript>/* (C) www.dhtmlgoodies.com, October Script from Www.dhtmlgoodies.com. You'll find this and a lot of the other scripts in our website. Terms of use:you are free to use this script as long as the ' copyright ' is kept intact. However, redistribute, sell or repost it without our permission. Thank you! www.dhtmlgoodies.com ALF Magne Kalleland * * var tablewidget_tablecounter = 0; var tablewidget_arraysort = new Array (); var tablewidget_oktosort = true; var activecolumn = new Array (); var Arrowimagepath = "images/"; Path to arrow images function Addendcol (obj) {if (document.all) return; var rows = obj.getelementsbytagname (' TR '); for (Var no=0;no<rows.length;no++) {var cell = Rows[no].insertcell (-1); cell.innerhtml = '; Cell.style.width = ' 13px '; Cell.width = ' 13 '; }} function HighlighttablEheader () {this.classname= ' tablewigdet_headercellover '; if (document.all) {//i.e fix for "jumping" headings var divobj = This.parentNode.parentNode.parentNode.parentNode; This.parentNode.style.top = divobj.scrolltop + ' px '; } function Dehighlighttableheader () {this.classname= ' Tablewidget_headercell '; function Mousedowntableheader () {this.classname= ' Tablewigdet_headercelldown '; if (document.all) {//i.e fix for "jumping" headings var divobj = This.parentNode.parentNode.parentNode.parentNode; This.parentNode.style.top = divobj.scrolltop + ' px '; } function Sortnumeric (a,b) {a = A.replace (/,/, '. '); b = B.replace (/,/, '. '); A = A.replace (/[^\d\-\.\/]/g, ""); b = B.replace (/[^\d\-\.\/]/g, ""); if (A.indexof ('/') >=0) A = eval (a); if (B.indexof ('/') >=0) b = eval (b); return A/1-B/1; The function sortstring (A, B) {if (A.touppercase () < B.touppercase ()) return-1; if (A.touppercase () > B.touppercase ()) return 1; return 0; } function CanceltablewIdgetevent () {return false; function sorttable () {if (!tablewidget_oktosort) return; Tablewidget_oktosort = false; /* Getting index of current column */var obj = this; var indexthis = 0; while (obj.previoussibling) {obj = obj.previoussibling; if (obj.tagname== ' TD ') indexthis++; var images = this.getelementsbytagname (' IMG '); if (This.getattribute (' direction ') | | | this.direction) {direction = This.getattribute (' direction '); if (navigator.userAgent.indexOf (' Opera ') >=0) direction = this.direction; if (direction== ' ascending ') {direction = ' descending '; This.setattribute (' direction ', ' descending '); this.direction = ' descending '; }else{Direction = ' ascending '; This.setattribute (' direction ', ' ascending '); this.direction = ' ascending '; }}else{Direction = ' ascending '; This.setattribute (' direction ', ' ascending '); this.direction = ' ascending '; } if (direction== ' descending ') {images[0].style.display= ' inline '; images[0].style.visibility= ' visible '; Images[1].style.dIsplay= ' None '; }else{images[1].style.display= ' inline '; images[1].style.visibility= ' visible '; Images[0].style.display= ' None '; var tableobj = This.parentNode.parentNode.parentNode; var tbody = tableobj.getelementsbytagname (' tbody ') [0]; var widgetindex = TableObj.id.replace (/[^\d]/g, "); var sortmethod = Tablewidget_arraysort[widgetindex][indexthis]; N = numeric, S = String if (Activecolumn[widgetindex] && activecolumn[widgetindex]!=this) {var images = active Column[widgetindex].getelementsbytagname (' IMG '); Images[0].style.display= ' None '; images[1].style.display= ' inline '; images[1].style.visibility = ' hidden '; if (Activecolumn[widgetindex]) activecolumn[widgetindex].removeattribute (' direction '); } Activecolumn[widgetindex] = this; var cellarray = new Array (); var cellobjarray = new Array (); for (Var no=1;no<tableobj.rows.length;no++) {var content= tableobj.rows[no].cells[indexthis].innerhtml+ '; Cellarray.push (content); Cellobjarray.push (Tableobj.rows[no].cells[indexthis]); } if (sortmethod== ' N ') {Cellarray = Cellarray.sort (sortnumeric); }else{Cellarray = Cellarray.sort (sortstring); } if (direction== ' descending ') {for (Var no=cellarray.length;no>=0;no--) {for (Var no2=0;no2<cellobjarray.length ; no2++) {if (cellobjarray[no2].innerhtml = = Cellarray[no] &&!cellobjarray[no2].getattribute (' Allreadysorted ')) {cellobjarray[no2].setattribute (' allreadysorted ', ' 1 '); Tbody.appendchild (Cellobjarray[no2].parentnode); }}}else{for (Var no=0;no<cellarray.length;no++) {for (Var no2=0;no2<cellobjarray.length;no2++) {if (CellObjA rray[no2].innerhtml = = Cellarray[no] &&!cellobjarray[no2].getattribute (' allreadysorted ')) {cellObjArray[ No2].setattribute (' allreadysorted ', ' 1 '); Tbody.appendchild (Cellobjarray[no2].parentnode); for (Var no2=0;no2<cellobjarray.length;no2++) {cellobjarray[no2].removeattribute (' allreadysorted '); } Tablewidget_oktosort = true; function Inittablewidget (Objid,width,Height,sortarray) {width = width + '; Height = height + '; var obj = document.getElementById (ObjID); Obj.parentnode.classname= ' Widget_tablediv '; if (navigator.userAgent.indexOf (' msie ') >=0) {Obj.parentNode.style.overflowY = ' auto '; } Tablewidget_arraysort[tablewidget_tablecounter] = Sortarray; if (width.indexof ('% ') >=0) {obj.style.width = width; Obj.parentNode.style.width = width; }else{obj.style.width = width + ' px '; Obj.parentNode.style.width = width + ' px '; } if (Height.indexof ('% ') >=0) {//obj.style.height = height; Obj.parentNode.style.height = height; }else{//obj.style.height = height + ' px '; Obj.parentNode.style.height = height + ' px '; } obj.id = ' tablewidget ' + tablewidget_tablecounter; Addendcol (obj); obj.cellspacing = 0; obj.cellpadding = 0; Obj.classname= ' Tablewidget '; var tHead = obj.getelementsbytagname (' tHead ') [0]; var cells = thead.getelementsbytagname (' TD '); for (Var no=0;no<cells.length;no++) {cells[no].classname = ' TablewidgeT_headercell '; Cells[no].onselectstart = canceltablewidgetevent; if (no==cells.length-1) {cells[no].style.borderright = ' 0px '; } if (Sortarray[no]) {cells[no].onmouseover = Highlighttableheader; Cells[no].onmouseout = Dehighlighttableheader; Cells[no].onmousedown = Mousedowntableheader; Cells[no].onmouseup = Highlighttableheader; Cells[no].onclick = sorttable; var img = document.createelement (' img '); IMG.SRC = Arrowimagepath + ' arrow_up.gif '; Cells[no].appendchild (IMG); img.style.visibility = ' hidden '; var img = document.createelement (' img '); IMG.SRC = Arrowimagepath + ' arrow_down.gif '; Cells[no].appendchild (IMG); Img.style.display = ' None '; }else{cells[no].style.cursor = ' default '; } var tbody = Obj.getelementsbytagname (' tbody ') [0]; if (document.all && navigator.userAgent.indexOf (' Opera ') <0) {tbody.classname= ' scrollingcontent '; tbody.style.display= ' block '; }else{tbody.classname= ' scrollingcontent '; if (tbody.offsetheight> (tBody.parentNode.pareNTNODE.OFFSETHEIGHT-50)) {tBody.style.height = (obj.parentnode.clientheight-thead.offsetheight) + ' px '; }else{tbody.style.overflow= ' hidden '; } if (Navigator.userAgent.indexOf (' Opera ') >=0) {obj.parentNode.style.overflow = ' auto '; } for (Var no=1;no<obj.rows.length;no++) {obj.rows[no].onmouseover = Highlightdatarow; Obj.rows[no].onmouseout = Dehighlightdatarow; for (Var no2=0;no2<sortarray.length;no2++) {/* Right align numeric cells */if (SORTARRAY[NO2) && Sortarray[no2 ]== ' N ') obj.rows[no].cells[no2].style.textalign= ' right '; } for (Var no2=0;no2<sortarray.length;no2++) {/* Right align numeric cells/if (SORTARRAY[NO2) && Sortarra y[no2]== ' N ') obj.rows[0].cells[no2].style.textalign= ' right '; } tablewidget_tablecounter++; function Highlightdatarow () {if (navigator.userAgent.indexOf (' Opera ') >=0) return; This.classname= ' Tablewidget_datarollover '; if (document.all) {//i.e fix for "jumping" headings var divobj = This.parentNode.parentNOde.parentnode; var tHead = divobj.getelementsbytagname (' TR ') [0]; THead.style.top = divobj.scrolltop + ' px '; } function Dehighlightdatarow () {if (navigator.userAgent.indexOf (' Opera ') >=0) return; This.classname=null; if (document.all) {//i.e fix for "jumping" headings var divobj = This.parentNode.parentNode.parentNode; var tHead = divobj.getelementsbytagname (' TR ') [0]; THead.style.top = divobj.scrolltop + ' px '; } </SCRIPT> <meta content= "MSHTML 6.00.5730.13" name=generator></pead> <BODY> <div class =widget_tablediv> <table id=mytable> <THEAD> <TR> <TD>Name</TD> <td>age</t d> <TD>Position</TD> <TD>Income</TD> <td>gender</td></tr></thead > <tbody class=scrollingcontent> <TR> <TD>John</TD> <TD>37</TD> <td>man Aging Director</td> <TD>90.000</TD> <td>male</td></tr> <TR> <TD>Susan</TD> <TD>34</TD> <TD>Partner</TD> <td>90.000</td > <TD>Female</TD></TR> <TR> <TD>David</TD> <TD>29</TD> <td >head of production</td> <TD>70.000</TD> <TD>Male</TD></TR> <TR> <td >Laura</TD> <TD>29</TD> <td>head of marketing</td> <TD>70.000</TD> < td>female</td></tr> <TR> <TD>Kate</TD> <TD>18</TD> <TD> marketing</td> <TD>50.000</TD> <TD>Female</TD></TR> <TR> <td>mona </TD> <TD>21</TD> <TD>Marketing</TD> <TD>53.000</TD> <td>female </TD></TR> <TR> <TD>Mike</TD> <TD>21</TD> <TD>Marketing</TD> <TD>53.000</TD> <td>male</td></tr> <TR> <TD>Mark</TD> <TD>25</TD> <TD>Production</TD> <td>52.000 </TD> <TD>Male</TD></TR> <TR> <TD>Peter</TD> <TD>33</TD> < td>production</td> <TD>55.000</TD> <TD>Male</TD></TR> <TR> <TD> jennifer</td> <TD>24</TD> <TD>Production</TD> <TD>49.000</TD> <TD> female</td></tr> <TR> <TD>David</TD> <TD>25</TD> <td>photography </TD> <TD>51.000</TD> <TD>Male</TD></TR> <TR> <TD>Anna</TD> & Lt Td>42</td> <td>head of photography</td> <TD>56.000</TD> <td>female</td ></TR> <TR> <TD>Rita</TD> <TD>30</TD> <TD>Photography</TD> < Td>54.000</td> <td>female</td></tr> <TR> <TD>Magnus</TD> <TD>25</TD> <TD>Freelancer</TD> <td& gt;65.000</td> <TD>Male</TD></TR> <TR> <TD>Johnny</TD> <td>29</ td> <TD>Freelancer</TD> <TD>63.000</TD> <td>male</td></tr></tbody ></TABLE></DIV> <script type=text/javascript> inittablewidget (' myTable ', 500,250,array (' S ', ' n ', False, ' n ', ' S '); </SCRIPT> </BODY></HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
