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