TableSort.js

最新推荐文章于 2023-04-26 14:27:49 发布

相思比梦长

最新推荐文章于 2023-04-26 14:27:49 发布

阅读量477

点赞数 1

分类专栏： WEB前端文章标签： TableSort JAVASCRIPT

本文链接：https://blog.csdn.net/netuser1937/article/details/54969080

版权

WEB前端专栏收录该内容

114 篇文章 2 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 οnclick="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>