一个Javascript的类库，用于table内容排序。使用很方便，不用每次都去调用数据库了。
特别适合多表查询的排序。加上<tbody>的style.display切换，也可以实现分页。
效果演示
用法:
1.添加JS
<SCRIPTsrc="sorttable.js"type="text/javascript"></SCRIPT>
2.添加TABLE,注意的是：一定要有ID,class为"sortable"
<tableclass="sortable"id="mytable">
OK,可以了，简单的吧
如果觉得太单调，自己加点CSS吧，官方给出了改HEAD的CSS
/*Sortabletables*/
table.sortablea.sortheader{
background-color:#eee;
color:#666666;
font-weight:bold;
text-decoration:none;
display:block;
}
table.sortablespan.sortarrow{
color:black;
text-decoration:none;
}
复制代码 代码如下:
addEvent(window,"load",sortables_init);
varSORT_COLUMN_INDEX;
functionsortables_init(){
//Findalltableswithclasssortableandmakethemsortable
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)){
//initTable(thisTbl.id);
ts_makeSortable(thisTbl);
}
}
}
functionts_makeSortable(table){
if(table.rows&&table.rows.length>0){
varfirstRow=table.rows[0];
}
if(!firstRow)return;
//Wehaveafirstrow:assumeit'stheheader,andmakeitscontentsclickablelinks
for(vari=0;i<firstRow.cells.length;i++){
varcell=firstRow.cells[i];
vartxt=ts_getInnerText(cell);
cell.innerHTML='<ahref="#"class="sortheader"'+
'onclick="ts_resortTable(this,'+i+');returnfalse;">'+
txt+'<spanclass="sortarrow"></span></a>';
}
}
functionts_getInnerText(el){
if(typeofel=="string")returnel;
if(typeofel=="undefined"){returnel};
if(el.innerText)returnel.innerText;//Notneededbutitisfaster
varstr="";
varcs=el.childNodes;
varl=cs.length;
for(vari=0;i<l;i++){
switch(cs[i].nodeType){
case1://ELEMENT_NODE
str+=ts_getInnerText(cs[i]);
break;
case3://TEXT_NODE
str+=cs[i].nodeValue;
break;
}
}
returnstr;
}
functionts_resortTable(lnk,clid){
//getthespan
varspan;
for(varci=0;ci<lnk.childNodes.length;ci++){
if(lnk.childNodes[ci].tagName&&lnk.childNodes[ci].tagName.toLowerCase()=='span')span=lnk.childNodes[ci];
}
varspantext=ts_getInnerText(span);
vartd=lnk.parentNode;
varcolumn=clid||td.cellIndex;
vartable=getParent(td,'TABLE');
//Workoutatypeforthecolumn
if(table.rows.length<=1)return;
varitm=ts_getInnerText(table.rows[1].cells[column]);
sortfn=ts_sort_caseinsensitive;
if(itm.match(/^dd[/-]dd[/-]dddd$/))sortfn=ts_sort_date;
if(itm.match(/^dd[/-]dd[/-]dd$/))sortfn=ts_sort_date;
if(itm.match(/^[?]/))sortfn=ts_sort_currency;
if(itm.match(/^[d.]+$/))sortfn=ts_sort_numeric;
SORT_COLUMN_INDEX=column;
varfirstRow=newArray();
varnewRows=newArray();
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")=='down'){
ARROW='↑';
newRows.reverse();
span.setAttribute('sortdir','up');
}else{
ARROW='↓';
span.setAttribute('sortdir','down');
}
//WeappendChildrowsthatalreadyexisttothetbody,soitmovesthemratherthancreatingnewones
//don'tdosortbottomrows
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]);}
//dosortbottomrowsonly
for(i=0;i<newRows.length;i++){if(newRows[i].className&&(newRows[i].className.indexOf('sortbottom')!=-1))table.tBodies[0].appendChild(newRows[i]);}
//Deleteanyotherarrowstheremaybeshowing
varallspans=document.getElementsByTagName("span");
for(varci=0;ci<allspans.length;ci++){
if(allspans[ci].className=='sortarrow'){
if(getParent(allspans[ci],"table")==getParent(lnk,"table")){//inthesametableasus?
allspans[ci].innerHTML='';
}
}
}
span.innerHTML=ARROW;
}
functiongetParent(el,pTagName){
if(el==null)returnnull;
elseif(el.nodeType==1&&el.tagName.toLowerCase()==pTagName.toLowerCase())//Geckobug,supposedtobeuppercase
returnel;
else
returngetParent(el.parentNode,pTagName);
}
functionts_sort_date(a,b){
//y2knotes:twodigityearslessthan50aretreatedas20XX,greaterthan50aretreatedas19XX
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)return0;
if(dt1<dt2)return-1;
return1;
}
functionts_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,'');
returnparseFloat(aa)-parseFloat(bb);
}
functionts_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;
returnaa-bb;
}
functionts_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)return0;
if(aa<bb)return-1;
return1;
}
functionts_sort_default(a,b){
aa=ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb=ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if(aa==bb)return0;
if(aa<bb)return-1;
return1;
}
functionaddEvent(elm,evType,fn,useCapture)
//addEventandremoveEvent
//cross-browsereventhandlingforIE5+,NS6andMozilla
//ByScottAndrew
{
if(elm.addEventListener){
elm.addEventListener(evType,fn,useCapture);
returntrue;
}elseif(elm.attachEvent){
varr=elm.attachEvent("on"+evType,fn);
returnr;
}else{
alert("Handlercouldnotberemoved");
}
}
【一实用的实现table排序的Javascript类库】相关文章：
★ 浅谈利用JavaScript进行的DDoS攻击原理与防御