对表格进行排序的实现步骤：
第一：下载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 */
实例如下图所示：
原文地址：http://blog.csdn.net/wpydaguan/article/details/42105875
