對錶格進行排序的實現步驟：
第一：下載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 */
實例如下圖所示：
