特别适合多表查询的排序。加上的style.display切换,也可以实现分页。
效果演示
用法:
1.添加JS
2.添加TABLE,注意的是:一定要有ID,class为"sortable"
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
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
vartxt=ts_getInnerText(cell);
cell.innerHTML='
txt+'
}
}
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
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
}
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
newRows.sort(sortfn);
if(span.getAttribute("sortdir")=='down'){
ARROW='↑';
newRows.reverse();
span.setAttribute('sortdir','up');
}else{
ARROW='↓';
span.setAttribute('sortdir','down');
}
//WeappendChildrowsthatalreadyexisttothetbody,soitmovesthemratherthancreatingnewones //Deleteanyotherarrowstheremaybeshowing span.innerHTML=ARROW; functiongetParent(el,pTagName){ functionts_sort_currency(a,b){ functionts_sort_numeric(a,b){ functionts_sort_caseinsensitive(a,b){ functionts_sort_default(a,b){
//don'tdosortbottomrows
for(i=0;i
for(i=0;i
varallspans=document.getElementsByTagName("span");
for(varci=0;ci
if(getParent(allspans[ci],"table")==getParent(lnk,"table")){//inthesametableasus?
allspans[ci].innerHTML='';
}
}
}
}
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
}
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);
}
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;
}
aa=ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
bb=ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
if(aa==bb)return0;
if(aa
}
aa=ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
bb=ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
if(aa==bb)return0;
if(aa
}
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");
}
}相关推荐