表格多列排序

效果演示

实现的是点击表格的标题，对应的列按照大小排序，如果是数字，按照大小排序，如果是非数字， 通过 localeCompare用本地特定的顺序来比较两个字符串。

1. 编写一个简单的表格

    
    
    


    

        

            

                

                    
name
                    
age
                    
language
                    
gender
                
            
            

            
        
    

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 页面中

1. 创建一个文档片段 documentFragment;
2. 遍历数据，每遍历一条数据创建一个元素“tr”;
3. 继续遍历这个 “tr” 里的每个键，将里面的值添加到创建的“td”中；
4. 将 “td” 添加到 “tr”，将 “tr” 添加到 “fragment”，将 “fragment” 添加到 “tBody”;
5. 将 “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. 排序

1. 将要排序的行类数组转换为数组；
2. 调用数组的 sort 方法，传入一定的规则进行排序；
3. 按照排完序的数组中的新数组，把每一行重新添加到 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);
            }
        }
    }