24h購物| | PChome| 登入
2023-01-12 00:13:52| 人氣65| 回應0 | 上一篇 | 下一篇

網站架設 讓網頁表格能主動排序 TableSorter

推薦 0 收藏 0 轉貼0 訂閱站台

1.png

網站架設

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

 



HTML



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

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

1、TableSorter 介紹

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

1. 官網申明

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

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

 

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


文章來自:

台長: cohenhb2
人氣(65) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 流行時尚(美容彩妝、保養、造型、塑身、流行情報) | 個人分類: NetYea |
此分類下一篇:CPanel 辦事器用transfer Tool對拷主機,
此分類上一篇:Arduino ESP32 若何 鍵盤節制 伺服馬達 網站架

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