超好用的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: bydarkst@163.com
始终坚持用最简单的思路,最简洁的写法,打造效率更高,易用性更高的软件!
****************************************************************************************************/
//一句话调用,自动搜索所有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);
}
}
}
}