讓網頁表格能自動排序 TableSorter

woff

一、TableSorter 介紹

在所有 jQuery 表格排序外掛裡面，TableSorter 算是使用率最高的，而且擴充功能相當多(但不一定用得到)，因此本篇推薦這個工具。

1. 官網說明

https://mottie.github.io/tablesorter/docs/

下載檔案後找到這幾個檔案

1. <!-- choose a theme file -->
   
2. <link rel="stylesheet" href="/path/to/theme.default.css">
   
3. <!-- load jQuery and tablesorter scripts -->
   
4. <script type="text/javascript" src="/path/to/jquery-latest.js"></script>
   
5. <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
   
6. 
   
7. <!-- tablesorter widgets (optional) -->
   
8. <script type="text/javascript" src="/path/to/jquery.tablesorter.widgets.js"></script>

複製代碼

HTML

1. <table id="myTable" class="tablesorter">
   
2.   <thead>
   
3.     <tr>
   
4.       <th>Last Name</th>
   
5.       <th>First Name</th>
   
6.       <th>Email</th>
   
7.       <th>Due</th>
   
8.       <th>Web Site</th>
   
9.     </tr>
   
10.   </thead>
    
11.   <tbody>
    
12.     <tr>
    
13.       <td>Smith</td>
    
14.       <td>John</td>
    
15.       <td>jsmith@gmail.com</td>
    
16.       <td>$50.00</td>
    
17.       <td>http://www.jsmith.com</td>
    
18.     </tr>
    
19.     <tr>
    
20.       <td>Bach</td>
    
21.       <td>Frank</td>
    
22.       <td>fbach@yahoo.com</td>
    
23.       <td>$50.00</td>
    
24.       <td>http://www.frank.com</td>
    
25.     </tr>
    
26.     <tr>
    
27.       <td>Doe</td>
    
28.       <td>Jason</td>
    
29.       <td>jdoe@hotmail.com</td>
    
30.       <td>$100.00</td>
    
31.       <td>http://www.jdoe.com</td>
    
32.     </tr>
    
33.     <tr>
    
34.       <td>Conway</td>
    
35.       <td>Tim</td>
    
36.       <td>tconway@earthlink.net</td>
    
37.       <td>$50.00</td>
    
38.       <td>http://www.timconway.com</td>
    
39.     </tr>
    
40.   </tbody>
    
41. </table>

複製代碼

tablesorter 在加載文檔時對表格進行排序：
加入script

1. <script>
   
2. $(function() {
   
3.   $("#myTable").tablesorter();
   
4. });
   
5. </script>

複製代碼

單擊標題，您會看到您的表格現在可以排序了！

1. <script>
   
2. $(function() {
   
3.   $("#myTable").tablesorter({ sortList: [[0,0], [1,0]] });
   
4. });
   
5. </script>

複製代碼

您還可以在初始化表時傳入配置選項。這告訴 tablesorter 按升序對第一列和第二列進行排序。

文章出處：NetYea 新竹網頁設計