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: 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); } } } }