24h購物| | PChome| 登入
2023-01-12 01:10:55| 人氣39| 回應0 | 下一篇
推薦 0 收藏 0 轉貼0 訂閱站台

讓網頁表格能自動排序 TableSorter


1、TableSorter 介紹

在所有 jQuery 表格排序外掛裡面,TableSorter 算是利用率最高的,並且擴充功能相當多(但紛歧定用獲得),因此本篇保舉這個對象。

1. 官網申明

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

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

 


單擊題目,您會看到您的表格現在可以排序了!
 


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

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

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



HTML

網站架設1.png

網站架設



tablesorter 在加載文檔時對表格進行排序:
到場script

 

  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>
複製代碼
  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>
複製代碼
  1. <script>
  2. $(function() {
  3.   $("#myTable").tablesorter({ sortList: [[0,0], [1,0]] });
  4. });
  5. </script>
複製代碼
網站架設

本文引用自:

台長: chadawa4
人氣(39) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 電視賞析(綜藝、戲劇、影集、節目) | 個人分類: NetYea |
此分類下一篇:網站架設 PWM晶片看很多了,那PWM節制又是怎麼一回事呢

是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼:
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文