close

1.png

一、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 新竹網頁設計

arrow
arrow
    文章標籤
    關鍵字優化 網頁設計 網站架設 網頁優化 SEO NetYea
    全站熱搜
    創作者介紹
    創作者 NetYea 網頁設計 的頭像
    NetYea 網頁設計

    NetYea 網頁設計

    NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()