js html table表单排序bydarkst_sort.js 无需配置,引入js即可

超好用的table排序工具,无需配置,引入js文件即可


项目需要html表格有排序的功能,网上找了好多都不合适,而且用起来很麻烦,要加各种id, onclik,colum_index之类的,甚是麻烦,不就排个序嘛,还得话花时间学习怎么用你的js,学完发现还是有BUG.. 于是自己写了一个,50行代码左右,自己用的爽歪歪,支持chorme,ie其他的没环境测试。如有发现BUG请告知,谢谢!
/**************************************************************************************************

 JS排序表格,您只需要在原本的html中添加一句

 <script language="javascript" src="bydarkst_sort.js"></script>



 Auteror: BYDARKST

 mailto: [email protected]

 始终坚持用最简单的思路,最简洁的写法,打造效率更高,易用性更高的软件!

 ****************************************************************************************************/



//一句话调用,自动搜索所有table的所有列可排序,支持日期,支持<thead>    <tbody>存在或不存在

window.onload = function(){

    RegisterAllTableSort(-1);

    alert("排序初始化");

}



//接口1:设置id 为tableid的表格第 col 列可排序,col为-1时自动选取所有列

function RegisterTableSortById(tableid, col){

    RegisterTableSort(document.getElementById(tableid), col)

}



//接口2:自动设置所有table的 col 列可排序

function RegisterAllTableSort(col){

    var tableNodes = document.getElementsByTagName("table");

    for(var i=0; i<tableNodes.length; i++)

        RegisterTableSort(tableNodes[i], col);

}



//接口3:立即对 tableid 的col 列进行排序

function SortTableNow(tableid, col){

    SortTableByCol(document.getElementById(tableid), col);

}



function SortTableByCol(tableNode, col){

    if(tableNode == null || col == "undefined")

        return;



    var rs = tableNode.rows;

    var order = rs[0].cells[col].order;



    for(var i=1; i<rs.length; i++){

        for(var j=i+1; j<rs.length; j++){

            if(order == "desc"){

                if(rs[i].cells[col].innerText < rs[j].cells[col].innerText)    //不能用innerHtml

                    rs[i].parentNode.insertBefore(rs[j], rs[i]);    //最高效率的排序方法,不需要新建节点

            }else{

                if(rs[i].cells[col].innerText > rs[j].cells[col].innerText)

                    rs[i].parentNode.insertBefore(rs[j], rs[i]);    //最高效率的排序方法,不需要新建节点

            }

        }

    }



    tableNode.rows[0].cells[col].order = order == "desc" ? "asc" : "desc";

}



function SortTableByCell(tableNode, cell){

    SortTableByCol(tableNode, cell.cellIndex);

}



function RegisterTableSort(tableNode, col){

    if(tableNode == null)

        return;



    if(col == -1){

        for(col=0; col< tableNode.rows[0].cells.length; col++){

            tableNode.rows[0].cells[col].onclick = function(){

                SortTableByCell(tableNode, this);

            }

        }

    }else{

        if(col < tableNode.rows[0].cells.length && col >=0){

            tableNode.rows[0].cells[col].onclick = function(){

                SortTableByCell(tableNode, this);

            }

        }

    }

}

 

你可能感兴趣的:(table)