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. HighlightingSystem插件使用（边缘发光）

    插件链接: http://pan.baidu.com/s/1dFwkaTr 密码: nw2c 导入Unity里面可能会报错,不过没关系,直接注释掉就可以了,我用的是Unity5.1的版本 可以看到如下 ...

  2. 【phpcms-v9】如何实现在含有子栏目的栏目下添加内容？

    对于题目的解释: 假设现在有一个一级栏目 为:栏目1 其下有二级栏目  :栏目1=>栏目11,栏目1=>栏目12,栏目1=>栏目13 同时栏目1下有文章列表 : 栏目1-----文章 ...

  3. Struts 2的iterator标签来遍历一个含有双层List的嵌套

    今天碰到一个很有意思的问题,就是需要用Struts 2的iterator标签来遍历一个含有双层List的嵌套. 首先我们从最基础的说起,用iterator标签遍历一个List. 如果Action中有一 ...

  4. php 常用经验

    1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的”函数”(译注:PHP手 ...

  5. TLSAlloc()

    为什么要有TLS?原因在于,进程中的全局变量与函数内定义的静态(static)变量,是各个线程都可以访问的共享变量.在一个线程修改的内存内容,对所有线程都生效.这是一个优点也是一个缺点.说它是优点,线 ...

  6. 解决：未能加载文件或程序集“Newtonsoft.Json, Version=4.5.0.0

    开发环境:Microsoft Visual Studio 2013 MVC4.0 使用SignalR的过程中随着版本的升级,其它程序集也跟着升级,如Newtonsoft.Json,一般编译的时候,如果 ...

  7. InputStream、OutputStream、String的相互转换(转)

    //1.字符串转inputStream String string; //...... InputStream is = new ByteArrayInputStream(string.getByte ...

  8. leetcode_question_115 Distinct Subsequences

    Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...

  9. html---textarea初始化时就有个table空格以及tab键操作无效

    1 初始化时就有一个tab空格 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRnJlZUFwZQ==/font/5a6L5L2T/fontsize/400 ...

  10. ASP.NET MVC4 ASP.NET Web API路由规则

    using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Web.Ht ...