实现的是点击表格的标题，对应的列按照大小排序，如果是数字，按照大小排序，如果是非数字， 通过 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. 导入数据
使用 Ajax 请求数据
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"
}
//.... 类似这样的数据
]
3. 将数据绑定到 HTML 页面中
- 创建一个文档片段 documentFragment;
- 遍历数据，每遍历一条数据创建一个元素“tr”;
- 继续遍历这个 “tr” 里的每个键，将里面的值添加到创建的“td”中；
- 将 “td” 添加到 “tr”，将 “tr” 添加到 “fragment”，将 “fragment” 添加到 “tBody”;
- 将 “fragment” 的值设为 null，释放内存。
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. 排序
- 将要排序的行类数组转换为数组；
- 调用数组的 sort 方法，传入一定的规则进行排序；
- 按照排完序的数组中的新数组，把每一行重新添加到 tBody 中，因为DOM映射（页面中的标签和 js 中获取到的元素集合紧紧绑定在一起，页面中的 HTML 结构变了，不需重新获取，js 里的集合也会变），重新添加是改变元素的位置，不是重复增加元素。
为了在 th 后面加一个箭头标识按什么顺序排序，添加了下面的CSS样式，data-text 由 js 代码动态生成。
.th:after {
content: attr(data-text); // 伪元素的内容
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);
}
}
}
网友评论