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. jquery 浏览器放大缩小函数resize

    <script> $(function(){ $(window).resize(function(){ var _height = $(window).height(); var _con ...

  2. eclipse中输入的中文为繁体的问题

    今天在eclipse中编写注释的时候发现,输入的中文都为繁体,且只在eclipse编辑器中为繁体,切换到网页中则为正常. 最后发现,竟然是输入法的shift+ctrl+F快捷键和eclipse的冲突. ...

  3. 剑指offer第10题

    import java.util.Scanner; /* 前两种方法是看最低为是不是为1,不为1则向右移动. 第一种只能对正整数有效,对负数不行,因为负数用的是补码,最高外符号位为1,最后右移动,肯定 ...

  4. emoji表情字符串 mysql 普通 utf8 格式无法存入

    处理方法: 1.在可以忽略emoji表情的情况下,可以选择将emoji表情字符过滤掉,这样不用动mysql 表结构    过滤Java代码参考如下: public static String filt ...

  5. OpenID倡议：别再创建新的用户名和密码

    原文作者:Jeff Atwood 随着Stack Overflow开发工作的逐步深入,我们不可回避地碰到了这个问题:我们需要让用户登录,即使网络上用户名/密码已经泛滥成灾,我们也只能随波逐流.我已经有 ...

  6. Scala写排序可以说是简洁又明了

    例如归并排序,清晰明了. object MergeSort extends App {     val oldList = List[Int](12, 40, 26, 89, 75, 44, 32,  ...

  7. .net mvc下的Areas和小写Url

    首先是一个站点有前台后台两部分,这个要怎么来做.可以在mvc项目中添加区域(Areas)来实现,当添加一个名为Admin的区域时,项目下多了一个Areas/Admin目录,里边有Controllers ...

  8. java后台开发- NOTE

    2015-1-6: IDEA servlet-api.jar idea从14升级到15后,发现 import javax.servlet.AsyncContext; 找不到,右击工程,open mod ...

  9. sketch 跟随鼠标指针移动的特效

    演示地址:http://www.ke01.com/yanshi/sucai/20140830/2/ 下载地址:https://yunpan.cn/cqgWeIYPer8eC  访问密码 672b

  10. 以程序的方式操纵NTFS的文件权限

    Windows NT/2K/XP版本的操作系统都支持NTFS格式的文件系统,这是一个有安全性质的文件系统,你可以通过Windows的资源管理器来设置对每个目录和 文件的用户访问权限.这里我就不对NTF ...