美文网首页
JavaScript点击表格的表头，实现表格排序

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

作者: celineWong7 | 来源:发表于2018-11-07 17:35 被阅读0次
  1. JavaScript点击表格的表头，实现表格排序
  2. vue最简单实现表格排序+搜索
  3. 这个表格是如何用HTML实现的？
  4. html5表格标签
  5. 2-12. 表格标签中的其他标签
  6. HTML表格-13
  7. html-表格
  8. 2-13. 表格的结构
  9. 说说如何基于 Vue.js 实现表格组件
  10. 2015年11月5日

    11. 现在很多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-点击表格的表头进行排序

    相关文章

    表格 格式： 表格标签： ————定义表格 ———— 定义表格标题。 ———— 定义表格的表头。 ———— ...

  11. 2-12. 表格标签中的其他标签

    | | 定义表格 || | 定义表格标题。 || | 定义表格的表头。 || | 定义表格的行。 ...

  12. HTML表格-13

    HTML 表格 实例： HTML 表格表头

  13. html-表格

    14. 表格标签 ： 表格框架 ： 表格头部 ： 表格主体 ：表头- - -加粗居中 ：行 ：列...

  14. 2-13. 表格的结构

    1、结构| | 定义表格| | 定义表格标题。| | 定义表格的表头。| | 定义表格的行。| ...

  15. 说说如何基于 Vue.js 实现表格组件

    我们基于 Vue.js 实现一个可根据某列进行排序的表格组件。 一个表格包含表头和数据两部分内容。因此，我们定义两...

  16. 2015年11月5日

    表格标签：table 表格thead 表格头tbody 表格主体tfoot 表格尾tr 表格行th 元素定义表头t...

    17. 网友评论

        本文标题：JavaScript点击表格的表头，实现表格排序

        本文链接：https://www.haomeiwen.com/subject/tubvxqtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        关于我们|服务条款|联系我们|JavaScript点击表格的表头，实现表格排序|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！