一实用的实现table排序的Javascript类库_Javascript教程-查字典教程网
一实用的实现table排序的Javascript类库
一实用的实现table排序的Javascript类库
发布时间:2016-12-30 来源:查字典编辑
摘要:一个Javascript的类库,用于table内容排序。使用很方便,不用每次都去调用数据库了。特别适合多表查询的排序。加上的style.di...

一个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");

}

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类