JS实现前台表格排序功能
虽然数据量不大的情况下，前台排序速度比较快，但一般情况下，我们的项目只使用后台排序，原因有二：
一是代码简单；二是前台JS排序对于有分页的情况无法处理。
前段时间，有个功能需要用到前台排序，没办法，写一个吧，下面记录一下实现的过程，其实很简单，如下：
var _sortType; //记录排序方向
var _sortColumnIndex;//记录排序列位置
var _sortMaxRow;//记录需要排序的行数
/*
*排序初始化
*/
function initSort(obj){
/*
*计算需要排序的行数[此处取的是‘第一列不为空的行数’]
*判断‘是否为空’时空格也要过滤掉
*/
if(_sortMaxRow == null || _sortMaxRow == ''){
var table1 = obj.parentNode.parentNode;
var rows = table1.rows;
for(var i = 1;i < rows.length;i++){
var tv = rows[i].cells[0].innerText;
if(tv != null && tv.replace(/(^\s*)(\s*$)/g,'') != ''){
_sortMaxRow = i;
}
}
}
/*
*计算第几列需要排序
*/
var sortColumnIndex = obj.cellIndex;
/*
*设置排序方向：
*1、如果要排序列与上一次排序列位置相同，则将排序方向反转
*2、如果要排序列与上一次排序列位置不相同，则排序方向不变，并设置需要排序的列位置
*/
if(sortColumnIndex != _sortColumnIndex){
_sortColumnIndex = sortColumnIndex;
if(_sortType == null || _sortType == ''){
_sortType = 'asc';
}
}
else{
if(_sortType == '' || _sortType == 'desc'){
_sortType = 'asc';
}
else{
_sortType = 'desc';
}
}
}
/*
*执行排序
*/
function execSort(obj){
if(_sortColumnIndex == ''){
sortField = 1;
}
if(_sortType == ''){
sortType = 'asc';
}
/*
*以下为排序部分
*1、排序采用的是‘下沉法排序’[即，冒泡法的的逆方向]
*2、由于涉及到隔行换色的问题，所以互换时只是把两行的内容互换，并没有将两个行对象互换
*/
var table1 = obj.parentNode.parentNode; //通过TD获得TABLE
for(var i = _sortMaxRow - 1;i >= 1;i--){
for(j = 1;j <= i;j++){
var t_first = table1.rows[j].cells[_sortColumnIndex].innerText;
var t_second = table1.rows[j+1].cells[_sortColumnIndex].innerText;
if((_sortType=='asc' && t_first > t_second) || (_sortType=='desc' && t_first < t_second)){
swapRow(table1.rows[j],table1.rows[j+1]);
}
}
}
}
function swapRow(row1,row2){
for(var k = 0;k < row1.cells.length;k++){
var tv = row1.cells[k].innerText;
row1.cells[k].innerText = row2.cells[k].innerText;
row2.cells[k].innerText = tv;
}
}
调用时，在表头TD上加 onclick="javascript:initSort(this);execSort(this);"