close

1.png

1、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
    文章標籤
    網頁設計
    全站熱搜
    創作者介紹
    創作者 robbinnycr707 的頭像
    robbinnycr707

    桃園網頁設計

    robbinnycr707 發表在 痞客邦 留言(0) 人氣()