實現(xiàn)的是點擊表格的標題卑吭，對應的列按照大小排序，如果是數(shù)字丙躏，按照大小排序择示，如果是非數(shù)字， 通過 localeCompare用本地特定的順序來比較兩個字符串晒旅。
1. 編寫一個簡單的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table sort</title>
<style type="text/css">
.box {
width: 400px;
border: 1px solid black;
margin: 10px auto;
text-align: center;
}
#table {
width：400px;
border-collapse: collapse;
}
th,
td {
width: 100px;
text-align: center;
line-height: 30px;
}
tbody>tr:nth-child(odd) {
background-color: lightgrey;
}
.th:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<table id="table">
<thead>
<tr>
<th class="th">name</th>
<th class="th">age</th>
<th class="th">language</th>
<th class="th">gender</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
2. 導入數(shù)據(jù)
使用 Ajax 請求數(shù)據(jù)
let data = null;
let xhr = new XMLHttpRequest();
xhr.open("get", 'data.txt', false); // sync
xhr.send();
data = JSON.parse(xhr.responseText);
data.txt:
[
{
"name": "Motte",
"age": 23,
"language": "Chinese",
"gender": "male"
},
{
"name": "Msey",
"age": 32,
"language": "Japanese",
"gender": "female"
}
//.... 類似這樣的數(shù)據(jù)
]
3. 將數(shù)據(jù)綁定到 HTML 頁面中
- 創(chuàng)建一個文檔片段 documentFragment;
- 遍歷數(shù)據(jù)栅盲，每遍歷一條數(shù)據(jù)創(chuàng)建一個元素“tr”;
- 繼續(xù)遍歷這個 “tr” 里的每個鍵，將里面的值添加到創(chuàng)建的“td”中废恋；
- 將 “td” 添加到 “tr”谈秫，將 “tr” 添加到 “fragment”，將 “fragment” 添加到 “tBody”;
- 將 “fragment” 的值設為 null拴签，釋放內(nèi)存孝常。
function bind() {
let frg = document.createDocumentFragment();
for (let i = 0; i < data.length; i++) {
let cur = data[i];
let oTr = document.createElement("tr");
for (let key in cur) {
let oTd = document.createElement("td");
oTd.innerHTML = cur[key];
oTr.appendChild(oTd);
}
frg.appendChild(oTr);
}
tBody.appendChild(frg);
frg = null;
}
bind();
4. 排序
- 將要排序的行類數(shù)組轉換為數(shù)組；
- 調(diào)用數(shù)組的 sort 方法蚓哩，傳入一定的規(guī)則進行排序构灸；
- 按照排完序的數(shù)組中的新數(shù)組，把每一行重新添加到 tBody 中岸梨，因為DOM映射（頁面中的標簽和 js 中獲取到的元素集合緊緊綁定在一起喜颁，頁面中的 HTML 結構變了，不需重新獲取曹阔，js 里的集合也會變）半开，重新添加是改變元素的位置，不是重復增加元素赃份。
為了在 th 后面加一個箭頭標識按什么順序排序寂拆，添加了下面的CSS樣式，data-text 由 js 代碼動態(tài)生成抓韩。
.th:after {
content: attr(data-text); // 偽元素的內(nèi)容
font-size: small;
margin-left: 5px;
}
function sort(index) {
this.flag *= -1;
let that = this;
let arr = Array.prototype.slice.call(oRows);
for (let i = 0; i < oThs.length; i++) {
if (oThs[i] !== this) {
oThs[i].setAttribute('data-text', '');
oThs[i].flag = -1;
}
}
let arrow = this.flag === 1 ? '\u2193' : '\u2191';
this.setAttribute('data-text', arrow);
arr.sort(function(a, b) {
let curCol = a.cells[index].innerHTML;
let nexCol = b.cells[index].innerHTML;
let curColNum = parseFloat(curCol);
let nexColNum = parseFloat(nexCol);
if (isNaN(curColNum) || isNaN(nexColNum)) {
return (curCol.localeCompare(nexCol)) * that.flag;
}
return (curColNum - nexColNum) * that.flag;
})
let frg = document.createDocumentFragment();
for (let i = 0; i < arr.length; i++) {
frg.appendChild(arr[i]);
}
tBody.appendChild(frg);
frg = null;
}
for (let i = 0; i < oThs.length; i++) {
let curTh = oThs[i];
curTh.index = i;
curTh.flag = -1;
if (curTh.className === "th") {
curTh.onclick = function() {
sort.call(this, curTh.index);
}
}
}
