• 讓網頁表格能自動排序 TableSorter
  • 推文至Facebook  
  • 一、TableSorter 介紹
    網頁表格, 自動排序, TableSorter
    在所有 jQuery 表格排序外掛裡面,TableSorter 算是使用率最高的,而且擴充功能相當多(但不一定用得到),因此本篇推薦這個工具。

    1. 官網說明

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

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

    <!-- choose a theme file -->

    <link rel="stylesheet" href="/path/to/theme.default.css">

    <!-- load jQuery and tablesorter scripts -->

    <script type="text/javascript" src="/path/to/jquery-latest.js"></script>

    <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

    <!-- tablesorter widgets (optional) -->

    <script type="text/javascript" src="/path/to/jquery.tablesorter.widgets.js"></script>

    HTML

    <!-- choose a theme file -->
    <link rel="stylesheet" href="/path/to/theme.default.css">
    <!-- load jQuery and tablesorter scripts -->
    <script type="text/javascript" src="/path/to/jquery-latest.js"></script>
    <script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
    
    <!-- tablesorter widgets (optional) -->
    <script type="text/javascript" src="/path/to/jquery.tablesorter.widgets.js"></script>


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

     

    <script>
    $(function() {
      $("#myTable").tablesorter();
    });
    </script>


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

     

    $(function() {
      $("#myTable").tablesorter({ sortList: [[0,0], [1,0]] });
    });

     

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

    新竹網頁設計,竹北網頁設計,竹南網頁設計,中壢網頁設計,網頁設計,免費模板,免費網頁套件,架設網站,網站架設 ,修改模板,主機代管,Android App

讓網頁表格能自動排序 TableSorter -