Javascript对HTML表格排序-很实用

Javascript对HTML表格排序-很实用

Javascript实现HTML表格排序，点击表头的标题单元格，即可对该列排序，升序降序切换，数字、文本都可以排序。

先看下面的效果图：

该功能已经封装成了一个Javascript函数，要实现表格排序的功能非常简单，只需：

1. 引入包含该函数的js文件（需要预先引入jQuery）—— 这个不难
2. 在需要排序的表格的标题单元格（th元素）的class属性添加sortable类，如 （也可以自定义类名。在调用排序函数时传入该类名即可）。—— 就是添加个样式类，这个也不难
3. 调用sortTable()进行排序 —— 一行代码而已

该函数将：
1. 自动寻找对应的表格table元素，以及排序内容所在的tbody元素
2. 绑定标题单元格的点击事件进行排序，升序降序切换
3. 给标题单元格添加排序图标—— ↓↑ ↓↑ （依赖于font-awesome 图标库），以及文字提示，鼠标停留时指针变成手型(cursor: pointer)

说明：

1. 排序时，指定单元格中的空格、百分号 、和逗号,会被过滤掉，以支持数值被格式化的情况，如数字123,455.0。

2. 可以支持自定义指定排序列的类名和排序比较函数，调用形式如下：

   sortTable(selector,compFunc);
   // selector 是用来选定需要排序的单元格所在列，如 .sortable
   // compFunc 是用来对单元格比较的函数，compFunc($td1,$td2,isAsc)
   // 前两个函数是td元素的jQuery对象，isAsc为true则为升序，否则为降序

代码如下：

function sortTable(selector, compFunc) {
      var mySelector = '.sortable';
      var myCompFunc = function($td1, $td2, isAsc) {
        var v1 = $.trim($td1.text()).replace(/,|\s+|%/g, '');
        var v2 = $.trim($td2.text()).replace(/,|\s+|%/g, '');
        var pattern = /^\d+(\.\d*)?$/;
        if (pattern.test(v1) && pattern.test(v2)) {
          v1 = parseFloat(v1);
          v2 = parseFloat(v2);
        }

        return isAsc ? v1 > v2 : v1 < v2;
      };

      var doSort = function($tbody, index, compFunc, isAsc)
      {
        var $trList = $tbody.find("tr");
        var len = $trList.length;
        for(var i=0; i1; i++) {
          for(var j=0; j1; j++) {
            var $td1 = $trList.eq(j).find("td").eq(index);
            var $td2 = $trList.eq(j+1).find("td").eq(index);

            if (compFunc($td1, $td2, isAsc)) {
              var t = $trList.eq(j+1);
              $trList.eq(j).insertAfter(t);
              $trList = $tbody.find("tr");
            }
          }
        }
      }

      var init = function() {
        var $th = $("th" + selector);
        this.$table = $th.closest("table");
        var that = this;
        $th.click(function(){
          var index = $(this).index();
          var asc = $(this).attr('data-asc');
          isAsc = asc === undefined ? true : (asc > 0 ? true : false);

          doSort(that.$table.find("tbody"), index, compFunc, isAsc);

          $(this).attr('data-asc', 1 - (isAsc ? 1 : 0));
        });

        $th.css({'cursor': 'pointer'})
           .attr('title', '点击排序')
           .append(' ');
      };


      selector = selector || mySelector;
      compFunc = compFunc || myCompFunc;

      init();
    }

该函数适用于给传统页面的表格添加上排序功能，非常少的改动。
如果是基于Vue.js等数据驱动视图的框架做的页面，则实现表格排序很简单：
由于表格是以数组为数据源渲染出来的，只需对数组排好序，页面自动更新。