var employees = []

    employees[0] = {

        name: "George",

        age: 32,

        retiredate: "March 12, 2014"

    }

    employees[1] = {

        name: "Edward",

        age: 17,

        retiredate: "June 2, 2023"

    }

    employees[2] = {

        name: "Christine",

        age: 58,

        retiredate: "December 20, 2036"

    }

    employees[3] = {

        name: "Sarah",

        age: 62,

        retiredate: "April 30, 2020"

    }

    //如何对上述数据排序呢?

    //实际上是利用arr.sort(function...)

    //而不是将某一列的数据都找出来排好序后  再去找对应的行

    function sortBy(arr, prop, descend) {

        //descend表示升序还是降序

        descend = descend ? 1 : -1;

        arr.sort(function(a, b) {

            if (a[prop] < b[prop]) {

                return -1 * descend;

            } else if (a[prop] > b[prop]) {

                return 1 * descend;

            } else return 0;

        });

    }

    sortBy(employees, 'name', true);

    console.log(employees);

    ;

    (function($) {

        $.fn.extend({

            tableSort: function() {

                console.log(this); //jQ对象的table

                var colHeads = this.find('thead');

                var tbody = this.find('tbody');

                var rows = tbody.find('tr');

                var desend = [];

                colHeads.on('click', 'td', function(e) {

                    var idx = $(this).index();

                    desend[idx] = !desend[idx]; //每一列都有一个变量 经过一次排序后下次再排序是反序

                    var descendflag = desend[idx] ? 1 : -1;

                    rows.sort(function(v1, v2) {

                        if (v1.cells[idx].innerText < v2.cells[idx].innerText) {

                            return -1 * descendflag;

                        } else if (v1.cells[idx].innerText > v2.cells[idx].innerText) {

                            return 1 * descendflag;

                        } else {

                            return 0;

                        }

                    });

                    rows.each(function(idx, item) {

                        tbody.append(item);

                    })

                });

            }

        })

    })(jQuery);

    $('#tableTest').tableSort();

    function sortOrigin() {

        var oTable = document.getElementById('tableTest');

        var oHead = oTable.tHead;

        var colHeads = oHead.getElementsByTagName('td');

        var oTbody = oTable.tBodies[0];

        var oBtn = document.getElementById('sort');

        var arr = []; //用来存放每一个tr

        var isAsc = true; //用来判断升序，还是降序

        var colHeadsArr = [];

        for (var i = 0, len = colHeads.length; i < len; i++) {

            colHeadsArr.push(colHeads[i]);

        }

        //表头事件代理

        oHead.addEventListener('click', function(e) {

            var target = e.target;

            if (target.tagName.toLowerCase() === 'td') {

                var idx = colHeadsArr.indexOf(target); //对第几列进行排序

                //和colHeads一样 oTbody.rows只是NodeList不是数组

                for (var i = 0; i < oTbody.rows.length; i++) {

                    arr[i] = oTbody.rows[i];

                }

                //此时arr是行构成的数组

                arr.sort(function(v1, v2) {

                    if (v1.cells[idx].innerText < v2.cells[idx].innerText) {

                        return -1;

                    } else if (v1.cells[idx].innerText > v2.cells[idx].innerText) {

                        return 1;

                    } else {

                        return 0;

                    }

                });

                for (var j = 0; j < arr.length; j++) {

                    oTbody.appendChild(arr[j]);

                }

            }

        }, false);

    }

所谓表格排序  实际上是 对象数组排序 --> []中的自定义sort函数

参考 http://www.cnblogs.com/xiao-t/archive/2012/12/27/2836248.html

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>table排序</title>

</head>

<body>

    <table id="tableTest" width="400" border="1">

        <thead>

            <tr>

                <td>ID</td>

                <td>Name</td>

                <td>col1</td>

                <td>COL2</td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>2</td>

                <td>bbb</td>

                <td>MANU</td>

                <td>Znbsp;</td>

            </tr>

            <tr>

                <td>5</td>

                <td>eee</td>

                <td>COLS</td>

                <td>Ssp;</td>

            </tr>

            <tr>

                <td>3</td>

                <td>ccc</td>

                <td>KK</td>

                <td>bsp;</td>

            </tr>

            <tr>

                <td>4</td>

                <td>ddd</td>

                <td>Dnbsp;</td>

                <td>nbsp;</td>

            </tr>

            <tr>

                <td>1</td>

                <td>aaa</td>

                <td>Pnbsp;</td>

                <td>Mnbsp;</td>

            </tr>

        </tbody>

    </table>

    <input type="button" id="sort" value="表格排序" />

    <script>

    window.onload = function() {

        var oTable = document.getElementById('tableTest');

        var oHead = oTable.tHead;

        var colHeads = oHead.getElementsByTagName('td');

        var oTbody = oTable.tBodies[0];

        var oBtn = document.getElementById('sort');

        var arr = []; //用来存放每一个tr

        var isAsc = true; //用来判断升序，还是降序

        var colHeadsArr = [];

        for (var i = 0, len = colHeads.length; i < len; i++) {

            colHeadsArr.push(colHeads[i]);

        }

        //表头事件代理

        oHead.addEventListener('click', function(e) {

            var target = e.target;

            if (target.tagName.toLowerCase() === 'td') {

                var idx = colHeadsArr.indexOf(target); //对第几列进行排序

                //和colHeads一样 oTbody.rows只是NodeList不是数组

                for (var i = 0; i < oTbody.rows.length; i++) {

                    arr[i] = oTbody.rows[i];

                }

                //此时arr是行构成的数组

                arr.sort(function(v1, v2) {

                    if (v1.cells[idx].innerText < v2.cells[idx].innerText) {

                        return -1;

                    } else if (v1.cells[idx].innerText > v2.cells[idx].innerText) {

                        return 1;

                    } else {

                        return 0;

                    }

                });

                for (var j = 0; j < arr.length; j++) {

                    oTbody.appendChild(arr[j]);

                }

            }

        }, false);

    }

    </script>

</body>

</html>

接下来做成插件的样子

JS表格排序的更多相关文章

  1. [Js]表格排序

    思路:遍历每个li,并把它们存放到数组中去,然后通过sort()方法进行排序,再插入 <body>    <input type="button" value=& ...

  2. js表格排序 & 去除字符串空格

    // a:列数 bool:排序升序判断参数 true false Str:支持多列 function newUnitSort(a, bool, str) { var oTable = document ...

  3. JS实现表格排序

    今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻... 一.JS代码,文件名为code.js如下: (function($){ //插件 $.extend($,{ //命名空间 ...

  4. 案例学习总结：原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  5. Table Dragger - 简单的 JS 拖放排序表格插件

    Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...

  6. JS对表格排序(支持对序号，数字，字母，日期)

    JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...

  7. js简单实现表格排序

    昨天看到一篇关于表格排序的随笔,鉴于本人还只会简单的js,不会使用封装,所以自己也试了一下写这个效果.可能不太优化,原理思路是:获取行对象tr,排序tr中要比较的对象td,排序后添加回tbody.如下 ...

  8. JS实现前台表格排序功能

    JS实现前台表格排序功能 虽然数据量不大的情况下,前台排序速度比较快,但一般情况下,我们的项目只使用后台排序,原因有二: 一是代码简单:二是前台JS排序对于有分页的情况无法处理. 前段时间,有个功能需 ...

  9. jQuery 表格排序插件 Tablesorter 使用

    jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...

随机推荐

  1. 使用PowerDesigner创建数据库表图文并茂版

    使用PowerDesigner创建数据库表图文并茂版 使用PowerDesigner 建数据库表. 一直很忙,没有时间写东西.这次搞点会声会色的,嘿嘿 此技能为项目经理必备技能. 本次主角: 1.在w ...

  2. Linux程序设计 读笔2 Shell脚本

    第二章 Shell程序设计 四.管道和重定向 1 重定向输出 ls -l > lsoutput.txt ps >> lsoutput.txt >>表示附加到一个文件中 文 ...

  3. Mongodb基础知识----Mongodb权威指南阅读

    文档是Mongodb中数据的基本单元,类型关系型数据库中的行,每个文档都有一个键值唯一的键_id.集合可以看做拥有动态模式的表. Mongodb一个实例可以拥有多个相互独立的数据库. Mongodb区 ...

  4. PHP搭建简单暴力的mvc

    对于一个web系统来说,我们使用mvc很必要, 给我们带来的是清晰的结构,易运维,易扩展, mvc 我对其的理解应该叫mxvc, 多了一个x , 这个x代表什么,x可以理解为 relay,proxy, ...

  5. 实现php获取mp3文件元信息如播放时间歌曲作者等

    最近收集到一个php获取mp3文件元信息的类,感觉比较方便.现在分享给大家! 下面是使用方式和测试方式: <?php include_once 'mp3file.class.php'; func ...

  6. Flink资料（2）-- 数据流容错机制

    数据流容错机制 该文档翻译自Data Streaming Fault Tolerance,文档描述flink在流式数据流图上的容错机制. ------------------------------- ...

  7. codeforces 552 E. Vanya and Brackets 表达式求值

    题目链接 讲道理距离上一次写这种求值的题已经不知道多久了. 括号肯定是左括号在乘号的右边, 右括号在左边. 否则没有意义. 题目说乘号只有15个, 所以我们枚举就好了. #include <io ...

  8. hdu 1695 GCD 容斥+欧拉函数

    题目链接 求 $ x\in[1, a] , y \in [1, b] $ 内 \(gcd(x, y) = k\)的(x, y)的对数. 问题等价于$ x\in[1, a/k] , y \in [1, ...

  9. UIKit之浅析UIButton

    UIButton * button =[[UIButton alloc]init]; button.backgroundColor=[UIColor redColor]; [button setTit ...

  10. RedMine 版本管理工具

    一.介绍: Redmine 是一个开源的.基于Web的项目管理和缺陷跟踪工具.它用日历和甘特图辅助项目及进度可视化显示.同时它又支持多项目管理.Redmine是一个自由开放 源码软件解决方案,它提供集 ...