jQueryTable – 實現數據表格化的重要插件

一、引入jQueryTable插件

在使用jQueryTable插件前，需要先引入jQuery庫和jQueryTable插件，下面是引入代碼：

<!-- 引入jQuery庫 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!-- 引入jQuery Table插件 -->
<link href="https://cdn.bootcss.com/jquery.tablesorter/2.30.5/css/theme.default.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery.tablesorter/2.30.5/js/jquery.tablesorter.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.tablesorter/2.30.5/js/jquery.tablesorter.widgets.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.tablesorter/2.30.5/js/jquery.tablesorter.pager.min.js"></script>

二、基本使用

jQueryTable插件可以快速將數據渲染成表格形式，下面是實現的代碼示例：

<table id="my-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年齡</th>
      <th>性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>張三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

<script>
  $(document).ready(function() { 
    $('#my-table').tablesorter(); 
  });
</script>

代碼解析：

1. 首先，我們定義了一個table元素，並指定了它的id為”my-table”，為接下來的jQueryTable插件提供數據源。

2. 接著，在$(document).ready()中調用了tablesorter()函數，將剛才定義的table元素轉換成一個可以排序、分頁的jQueryTable。

3. tablesorter()是最基本、最簡單的jQueryTable插件使用方式，如果我們要實現更多複雜的功能，可以通過tablesorter widget和pagination插件來實現。

三、高級使用——tablesorter widget和pagination插件

1. widget插件

tablesorter插件提供了豐富的widget插件，通過導入不同的widget插件，可以實現特定的功能，比如按列搜索、切換行顏色等等。

下面我們通過例子來演示如何添加widget插件：

<!-- 引入widget插件 -->
<script src="https://cdn.bootcss.com/tablesorter/2.30.5/js/extras/jquery.tablesorter.widgets.min.js"></script>

<table id="my-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年齡</th>
      <th>性別</th>
      <th>積分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>李小明</td>
      <td>18</td>
      <td>男</td>
      <td>90</td>
    </tr>
    <tr>
      <td>趙芳芳</td>
      <td>20</td>
      <td>女</td>
      <td>80</td>
    </tr>
    <tr>
      <td>張鵬</td>
      <td>22</td>
      <td>男</td>
      <td>60</td>
    </tr>
  </tbody>
</table>

<script>
  $(document).ready(function() { 
    $('#my-table').tablesorter({
      // 使用widget插件
      widgets: [ 'zebra', 'columns', 'filter' ],
      // 按積分列排序
      sortList: [[3,1]]
    }); 
  });
</script>

代碼解析：

1. 首先，我們引入了widget插件文件。

2. 接著，我們在tablesorter()函數內部傳入了一個包含3個widget插件的數組，它們分別是：zebra（隔行換色）、columns（多列排序）和filter（按列搜索）。

3. 我們還設置了排序規則，比如按「積分」列降序排列。

2. pagination插件

pagination插件允許我們將數據分頁顯示，避免數據過多造成頁面混亂。

下面是如何引入pagination插件及代碼演示：

<!-- 引入pagination插件 -->
<script src="//mottie.github.io/tablesorter/js/jquery.tablesorter.pager.min.js"></script>

<table id="my-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年齡</th>
      <th>性別</th>
      <th>積分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>李小明</td>
      <td>18</td>
      <td>男</td>
      <td>90</td>
    </tr>
    <tr>
      <td>趙芳芳</td>
      <td>20</td>
      <td>女</td>
      <td>80</td>
    </tr>
    <tr>
      <td>張鵬</td>
      <td>22</td>
      <td>男</td>
      <td>60</td>
    </tr>
    <tr>
      <td>董明偉</td>
      <td>24</td>
      <td>男</td>
      <td>70</td>
    </tr>
    <tr>
      <td>湯一鳴</td>
      <td>26</td>
      <td>女</td>
      <td>75</td>
    </tr>
    <tr>
      <td>付麗麗</td>
      <td>28</td>
      <td>女</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">
        <div class="pager"></div>
      </td>
    </tr>
  </tfoot>
</table>

<script>
  $(document).ready(function() { 
    $('#my-table').tablesorter({
      widgets: ['zebra','columns'],
      sortList: [[3,1]],
      // 開啟分頁
      widgetOptions: {
        pager_size: 10, //每頁顯示的行數
        pager_startPage: 0, // 開始顯示的頁碼
        pager_countChildRows: false, // 是否顯示子行數
        pager_output: '{startRow} -- {endRow} / {filteredRows} (總數: {totalRows})', // 分頁信息文字
        pager_updateArrows: true, // 是否顯示上一頁下一頁
        pager_fixedHeight: false, // 分頁控制項是否固定高度
        pager_removeRows: false, // 分頁控制項是否刪除行
        pager_ajaxUrl: null // 分頁控制項使用AJAX
      }
    }); 
  });
</script>

代碼解析：

1. 我們需要在tfoot中添加一個class為pager的div元素，該元素是pagination插件的容器，用於渲染分頁控制項。

2. 接著，在tablesorter()函數內部傳入了一個包含pagination參數的widgetOptions，用於定義每頁顯示的行數、初始頁碼等等分頁信息。注意pager_size參數定義每頁顯示多少行數據，pager_startPage定義初始的頁碼，pager_output定義分頁信息，pager_updateArrows定義是否顯示上一頁下一頁等控制項。

至此，我們已經完成了一個比較完整的jQueryTable示例，除了基礎的排序功能，我們還添加了widget插件和pagination插件來實現更多高級功能。