用sorttable.js对表格进行排序

对表格进行排序的实现步骤：

第一：下载sorttable.js，链接：http://www.kryogenix.org/code/browser/sorttable/，（不需要jquery.js）

第二：导入该sorttable.js，（不需要jquery.js）

第导入：在 table标签添加一个class="sortable"。

至此，即可实现正反序的排列

如果想不对某列排序，只要在此列的<th>标签加上class="sorttable_nosort"即可。

注意：不支持分页

sorttable高级用法:

1)在页面加载后添加表排序

var newTableObject =document.getElementById(idOfTheTableIJustAdded) ;

sorttable.makeSortable(newTableObject);

 

2)总计行

总计行添加<tfoot>标签，如下图：

 

3）列头显示“图标”表示进行排序

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 

    content: " \25B4\25BE" 

}

 

4）使用自定义排序键

在单元格加sorttable_customkey属性，如下图

5）手动指定列的类型

在列头标签添加class，值为列类型(sorttable_numeric、sorttable_alpha)，如下图

6）使用自定义日期格式

添加自定义排序键值的格式为：YYYYMMDDHHMMSS，列如：

<td sorttable_customkey="20080211131900">February11th 2008, 1:19pm</td>

具体如下图

7）稳定排序

row_array.sort(this.sorttable_sortfunction);

sorttable.shaker_sort(row_array, this.sorttable_sortfunction);

8）通过代码排序表

var myTH = document.getElementsByTagName("th")[0];

sorttable.innerSortFunction.apply(myTH, []);

9）使用自己的图表说明可排序的列

添加css如下：

table.sortable th::after, th.sorttable_sorted::after, th.sorttable_sorted_reverse::after {

  content: " ";

  display: inline-block;

  width: 24px;

  height: 24px;

}

th.sorttable_sorted::after {

  background: url(my-sorted-icon.png);

  background-size: contain;

}

th.sorttable_sorted_reverse::after {

  background: url(my-sorted-reversed-icon.png);

  background-size: cover;

}

 

10）使某些列不可排序

添加class="sorttable_nosort"到 <th> 列标签

11）在页面加载完成是排序表

sorttable无法实现，实现的方法只能通过查询sql的order by 语句实现。

另一种方法为：sorting a table from your own code

12）第一次排序为降序

需要编辑sorttable.js. 找到如下行：

row_array.sort(this.sorttable_sortfunction);

在这行后面添加如下新行:

row_array.reverse();

13)非敏感字符排序

需要编辑sorttable.js. 找到如下代码：

sort_alpha:function(a,b) {

    if (a[0]==b[0]) return 0;

    if (a[0]<b[0]) return -1;

    return 1;

  },

并改变为：

 

  sort_alpha: function(a,b) {

    if (a[0].toLowerCase()==b[0].toLowerCase())return 0;

    if (a[0].toLowerCase()<b[0].toLowerCase())return -1;

    return 1;

  },

 

14）添加行号

需要添加如下css：

table.sortable tbody {

    counter-reset: sortabletablescope;

}

table.sortable thead tr::before {

    content: "";

    display: table-cell;

}

table.sortable tbody tr::before {

    content: counter(sortabletablescope);

    counter-increment: sortabletablescope;

    display: table-cell;

}

 

15）为表添加交替斑马线背景

添加如下css：

table.sortable tbody tr:nth-child(2n) td {

  background: #ffcccc;

}

table.sortable tbody tr:nth-child(2n+1) td {

  background: #ccfffff;

}

16）带滚动条的排序表

添加如下css：

/* Appearance */

    body, table { font-family: sans-serif; }

    table { border-collapse: collapse; }

    td, th { padding: 6px; }

    th { background: #333; color: white; }

    tbody tr:nth-child(odd) { background:#dfdfdf; }

    table { border: 1px solid red; }

   

    /* Scrollability of table */

    table { width: 500px; } /* fixed widthtable */

    thead tr { display: block; } /* makes itsizeable */

    tbody {

      display: block; /* makes it sizeable */

      height: 170px; /* height of scrollablearea */

      overflow: auto; /* scroll rather thanoverflow */

      width: 100%; /* fill the box */

    }

    thead th { width: 250px; } /* fixed widthfor THs */

    tbody td { width: 242px; } /* fixed widthfor TDs */

    /* the tbody needs to be 16px less than thethead, for the scrollbar */

   

实例如下图所示：