JQuery Data Table

<aside> 💡

JQuery Data Table套件可以參考廖建翔老師的書 (15-2)

</aside>

Data Table
- 使用JQuery
- 第11車廂-table界的神器!DataTables介紹篇(1) (2021.09)
- 第12車廂-table界的神器!DataTables介紹篇(2) (2021.09)
- 第13車廂-table界的神器!DataTables介紹篇(3) (2021.09)

以前面的bootstrap表格為例，我們來看要怎麼套JQuery Data Table:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
  </head>
  <body>
    <table class="table table-striped table-bordered table-hover">
      <thead class="table-primary">
          <tr>
              <th>產品名稱</th>
              <th>類別</th>
              <th>價格</th>
              <th>庫存</th>
              <th>描述</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>樂活智能手環 X1</td>
              <td>智慧穿戴裝置
              <td>NT$2,490元</td>
              <td>154</td>
              <td>支援心率監測、睡眠追蹤與LINE通知，適合日常運動與健康管理。</td>
          </tr>
          <tr>
              <td>酷睿電競滑鼠 G700</td>
              <td>電腦周邊</td>
              <td>NT$1,590元</td>
              <td>312</td>
              <td>具備RGB燈效與六段DPI調整，專為遊戲玩家設計。</td>
          </tr>
          <tr>
              <td>無線藍牙耳機 AirTune Pro</td>
              <td>音響設備</td>
              <td>NT$3,290元</td>
              <td>98</td>
              <td>支援降噪與通話清晰技術，續航最長8小時。</td>
          </tr>
          <tr>
              <td>4K HDR電視 55吋</td>
              <td>家電</td>
              <td>NT$25,900元</td>
              <td>45</td>
              <td>支援HDR與Dolby Vision，畫質細緻。</td>
          </tr>
      </tbody>
  </table>
  <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
  </body>
</html>

首先，引用CDN的CSS及javascript:

    <link href="<https://cdn.datatables.net/2.3.0/css/dataTables.bootstrap5.css>" rel="stylesheet">

<aside> 📢

注意，留原本的bootstrap js，否則，原來的元件可能就不能使用了。

</aside>

    <script src="<https://code.jquery.com/jquery-3.7.1.js>"></script>
  
    <!-- <https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.min.js> -->
    <script src= "<https://cdn.datatables.net/2.3.0/js/dataTables.js>"></script>
    <script src= "<https://cdn.datatables.net/2.3.0/js/dataTables.bootstrap5.js>"></script>
    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>

最後，加上這一段，原本的table就套上DataTable了。對，就是這麼簡單~~~

<aside> 📢

因為下面的javascript用到jquery的語法，以及datatable定義的js，所以，一定要放在最後面，否則，這段javascript會無效。

</aside>

    <script>
      $(document).ready( function () {
        $('#product_table').DataTable(); 
      } );
    </script>

變身了~~ 搜尋、排序都是內建功能，甚麼javascript都不用寫就有了。

完整的程式:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
    <link href="<https://cdn.datatables.net/2.3.0/css/dataTables.bootstrap5.css>" rel="stylesheet">
  </head>
  <body>
    <table id="product_table" class="table table-striped table-bordered table-hover">
      <thead class="table-primary">
          <tr>
              <th>產品名稱</th>
              <th>類別</th>
              <th>價格</th>
              <th>庫存</th>
              <th>描述</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>樂活智能手環 X1</td>
              <td>智慧穿戴裝置
              <td>NT$2,490元</td>
              <td>154</td>
              <td>支援心率監測、睡眠追蹤與LINE通知，適合日常運動與健康管理。</td>
          </tr>
          <tr>
              <td>酷睿電競滑鼠 G700</td>
              <td>電腦周邊</td>
              <td>NT$1,590元</td>
              <td>312</td>
              <td>具備RGB燈效與六段DPI調整，專為遊戲玩家設計。</td>
          </tr>
          <tr>
              <td>無線藍牙耳機 AirTune Pro</td>
              <td>音響設備</td>
              <td>NT$3,290元</td>
              <td>98</td>
              <td>支援降噪與通話清晰技術，續航最長8小時。</td>
          </tr>
          <tr>
              <td>4K HDR電視 55吋</td>
              <td>家電</td>
              <td>NT$25,900元</td>
              <td>45</td>
              <td>支援HDR與Dolby Vision，畫質細緻。</td>
          </tr>
      </tbody>
    </table>
    <script src="<https://code.jquery.com/jquery-3.7.1.js>"></script>
  
    <!-- <https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.min.js> -->
    <script src= "<https://cdn.datatables.net/2.3.0/js/dataTables.js>"></script>
    <script src= "<https://cdn.datatables.net/2.3.0/js/dataTables.bootstrap5.js>"></script>
    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
    <script>
      $(document).ready( function () {
        $('#product_table').DataTable(); 
      } );
    </script>

  </body>
</html>

FullCalendar

<aside> 💡

FullCalendar套件可以參考廖建翔老師的書 (15-3)

</aside>