JS实现前台表格排序功能

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

本文转载JS实现前台表格排序功能 - anywhere - 博客园 (cnblogs.com)