这篇文章主要为大家详细介绍了 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>
来源: http://www.phperz.com/article/17/0527/327834.html