TableSort.js表格排序插件使用方法详解

本文实例为大家分享了TableSort.js表格排序的具体代码，供大家参考，具体内容如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TableSort</title>
<style type="text/css">
table {
  border-collapse: collapse;
  width: 300px;
}
table caption {
  border-right: 1px solid #abc;
  border-left: 1px solid #abc;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  background-color: #afd;
}
#sales tr, #sales td {
  border: 1px solid #abc;
  text-align: center;
}
</style>
</head>
<body>
<table id="sales" summary="summary here">
 <caption>
 Main Title
 </caption>
 <col/>
 <col/>
 <col/>
 <thead>
  <tr>
   <th class="asc">Col1</th>
   <th>Col2</th>
   <th>Col3</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>A1</td>
   <td>S2</td>
   <td>W3</td>
  </tr>
  <tr>
   <td>B1</td>
   <td>C2</td>
   <td>V3</td>
  </tr>
  <tr>
   <td>C1</td>
   <td>X2</td>
   <td>K3</td>
  </tr>
 </tbody>
 <!-- tfoot><tr><td cols=3 >other description</td></tr></tfoot -->
</table>
<button onclick="fn()">Test</button>
<script language="javascript">
function TableSort(id) {
  this.tbl = document.getElementById(id);
  this.lastSortedTh = null;
  if (this.tbl && this.tbl.nodeName == "TABLE") {
    var headings = this.tbl.tHead.rows[0].cells;
    for (var i = 0; headings[i]; i++) {
      if (headings[i].className.match(/asc|dsc/)) {
        this.lastSortedTh = headings[i];
      }
    }
    this.makeSortable();
  }
}
TableSort.prototype.makeSortable = function() {
  var headings = this.tbl.tHead.rows[0].cells;
  for (var i = 0; headings[i]; i++) {
    headings[i].cIdx = i;
    var a = document.createElement("a");
    a.href = "#";
    a.innerHTML = headings[i].innerHTML;
    a.onclick = function(that) {
      return function() {
        that.sortCol(this);
        return false;
      }
    }(this);
    headings[i].innerHTML = "";
    headings[i].appendChild(a);
  }
}
TableSort.prototype.sortCol = function(el) {
  var rows = this.tbl.rows;
  var alpha = [], numeric = [];
  var aIdx = 0, nIdx = 0;
  var th = el.parentNode;
  var cellIndex = th.cIdx; 

  for (var i = 1; rows[i]; i++) {
    var cell = rows[i].cells[cellIndex];
    var content = cell.textContent ? cell.textContent : cell.innerText;
    var num = content.replace(/(\$|\,|\s)/g, "");
    if (parseFloat(num) == num) {
      numeric[nIdx++] = {
        value : Number(num),
        row : rows[i]
      }
    } else {
      alpha[aIdx++] = {
        value : content,
        row : rows[i]
      }
    }
  }
  function bubbleSort(arr, dir) {
    var start, end;
    if (dir === 1) {
      start = 0;
      end = arr.length;
    } else if (dir === -1) {
      start = arr.length - 1;
      end = -1;
    }
    var unsorted = true;
    while (unsorted) {
      unsorted = false;
      for (var i = start; i != end; i = i + dir) {
        if (arr[i + dir] && arr[i].value > arr[i + dir].value) {
          var temp = arr[i];
          arr[i] = arr[i + dir];
          arr[i + dir] = temp;
          unsorted = true;
        }
      }
    }
    return arr;
  } 

  var col = [], top, bottom;
  if (th.className.match("asc")) {
    top = bubbleSort(alpha, -1);
    bottom = bubbleSort(numeric, -1);
    th.className = th.className.replace(/asc/, "dsc");
  } else {
    top = bubbleSort(numeric, 1);
    bottom = bubbleSort(alpha, 1);
    if (th.className.match("dsc")) {
      th.className = th.className.replace(/dsc/, "asc");
    } else {
      th.className += "asc";
    }
  }
  if (this.lastSortedTh && th != this.lastSortedTh) {
    this.lastSortedTh.className = this.lastSortedTh.className.replace(
        /dsc|asc/g, "");
  }
  this.lastSortedTh = th;
  col = top.concat(bottom);
  var tBody = this.tbl.tBodies[0];
  for (var i = 0; col[i]; i++) {
    tBody.appendChild(col[i].row);
  }
}
function fn() { 

  var sales = document.getElementById('sales');
  var sortTable = new TableSort('sales');
}
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。