TShopping

 找回密碼
 註冊
搜索
查看: 737|回復: 0
打印 上一主題 下一主題

[教學] 讓網頁表格能自動排序 TableSorter

[複製鏈接]
跳轉到指定樓層
1#
發表於 2022-5-3 21:57:04 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
 
Push to Facebook
一、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. <!-- tablesorter widgets (optional) -->
  7. <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 新竹網頁設計

 

臉書網友討論
*滑块验证:
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2024-11-1 07:39 , Processed in 0.075645 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表