JavaScript点击表格的表头，实现表格排序

现在很多vue/react等js框架配套的UI框架，表格自带点击表头排序的动能。
后来小想了js/jq 手写的话，逻辑上如何实现。就写了个小demo，这里共享下。
这是一个小白demo。

1. 说明

1）页面预设布局
页面上事先给出表头，具体html代码如下：
其中表头的key属性作用后面说明。

<!DOCTYPE html>
<html>
<head>
    <title>demo2</title>
</head>
<body>
<p>点击表头，会根据当前列，切换排序。</p>
<table id="baseTable" border="1">
    <thead>
        <th style="color:#ccc;">序号</th>
        <th key="id">id</th>
        <th key="name">姓名</th>
        <th key="age">年龄</th>
        <th key="status">状态</th>
    </thead>
    <tbody></tbody>
</table>
<script src="./jquery-2.0.3.min.js"></script>
<script>
/** javaScript code....*/
<script>
</body>
</html>

2）关于数据：数据就是个数组对象。具体如下people数组：

    var people = [
        {
            id: '001',
            name: 'celine',
            age: '18',
            status: 2
        },
        {
            id: '003',
            name: 'apple',
            age: '16',
            status: 0
        },
        {
            id: '002',
            name: 'andy',
            age: '22',
            status: 1
        },
        {
            id: '005',
            name: 'hunter',
            age: '1',
            status: 0
        },
        {
            id: '004',
            name: 'redis',
            age: '15',
            status: 1
        },
        {
            id: '019',
            name: 'mango',
            age: '18',
            status: 0
        },
    ];

3）数据渲染方式
此处采用的是遍历数据，拼接字符串后，append到页面的<body></body>中。
具体的生成表格函数如下：

    function getbaseList(ary) {
        var html = '';
        for (var i=0 ; i<ary.length; i++){
            var status = '';
            switch(ary[i].status){
                case 1: status = '普通活跃'; break;
                case 2: status = '特别活跃'; break;
                default: status = '不活跃';
            }
            html += '<tr>';
            html += '<td>' + (i+1) + '</td>';
            html += '<td>' + ary[i].id + '</td>';
            html += '<td>' + ary[i].name + '</td>';
            html += '<td>' + ary[i].age + '</td>';
            html += '<td>' + status + '</td>';
            html += '</tr>';
        }
        $('#baseTable tbody').empty().append(html);
    }

2. 思路

因为表格数据是遍历数组动态创建，所以可以考虑在点击表头的时候，对数据进行排序。
对数据排序需要考虑两个关键点：

对哪个字段进行排序？
是正序（ASC）还是逆序（DESC）？

1）要排序的字段
先考虑要对哪个字段进行排序。这个由点击事件决定，点击哪一个表头，就是对那一列数据排序。所以我们可以考虑在表头标签中存储对应的字段属性——也就是下面代码中的key属性。

        <th key="id">id</th>
        <th key="name">姓名</th>
        <th key="age">年龄</th>
        <th key="status">状态</th>

属性值则对应数据people里面的对象属性。

2）正序还是逆序
和上面类似，想要知道当前表头字段是正序还是逆序，也只需要在表头标签中存储一个排序属性——sort属性。因为初始化的数据 people是乱序的，所以不需要预设sort属性。可以在点击事件排序时，再进行设置。

比如下面点击事件代码，当逆序排序后，预设sort为正序（确保下一次点击做的是正序排序）；当正序排序后，预设sort为逆序。

        $('#baseTable th').on('click', function(){
            var sort_ary;
            if ($(this).attr('sort') == 'desc') {
                //  逆序排序
                sort_ary = people.sort(compare($(this).attr('key'),-1));
                getbaseList(sort_ary);
                // 切换sort属性的值，预设下一次点击是正序
                $(this).attr('sort', 'asc'); 

            } else {
                //  正序排序
                sort_ary = people.sort(compare($(this).attr('key'),1));
                getbaseList(sort_ary);
                // 切换sort属性的值，预设下一次点击是正序
                $(this).attr('sort', 'desc');
            }
        });

3. 排序函数

此处的排序函数，我们直接使用sort()方法。
这个排序方法需要注意的是：字符串排序，还是数值排序。
还要考虑需要传入什么参数：要排序的字段 prop、正序/逆序 type。

    /** 
     * 比较函数
     * @param  {string} prop 数据里面要排序的key
     * @param  {number} type 1:asc  -1:desc
     * @return {number}
     */
    function compare(prop,type) {
        return function (obj1, obj2) {
            var val1 = obj1[prop];
            var val2 = obj2[prop];
            if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
                val1 = Number(val1);
                val2 = Number(val2);
            }
            if (val1 < val2) {
                return 0-type;
            } else if (val1 > val2) {
                return type;
            } else {
                return 0;
            }            
        } 
    }

4. 结语

自此就完成了一个简易版点击表头排序，详细代码详见 table-sort.html。
当然，这不是最简洁的方式，有看到小伙使用reverse()方法 JavaScript-点击表格的表头进行排序