2020年8月18日 星期二

jQuery UI SPA 應用程式 (二) : 動態表格 DataTables

今天繼續測試本機 jQuery UI 應用程式, 在上一篇文章中已利用 Bootstrap 的表格樣式呈現靜態表格資料, 其排列順序是固定不變無法動態排序的, 若要點擊欄位時依該欄位排序, 必須使用 jQuery 的外掛函式庫 DataTables.

以前曾對 DataTable 做過完整測試, 參考 :


但現在 DataTables 已隨著 jQuery UI 與 Bootstrap 的發展改版多次, 且許多函數使用方式也已經與之前大不同, 需要重新改寫之前的程式碼, 參考 :

# https://datatables.net/

由於 DataTables 與 jQuery UI 以及 Bootstrap 這兩個函式庫在 UI 上的黏合度非常高, 所以下載時需選定風格與版本 :

# https://datatables.net/download/

首先選擇樣式框架, 此處選 jQuery UI :




其次選擇函式庫, 由於 jQuery UI 最新版 v1.12.1 搭配 jQuery v1.12.4, 因此點選 jQuery 1 :




最後點選 Minified 與 Concatenate 後下載 zip 檔 :




將 zip 檔解壓縮後會產生一個 DataTables 目錄 :




將裡面的 datatables.js 與 datatables.css 這兩個檔案複製到專案目錄的 jquery 子目錄下 :




這樣就可以使用 DataTables 來呈現可排序的動態表格了, 網頁應用程式也要加上 DataTables 的程式與樣式, 將上一篇中的範例 1 修改為如下 :

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Single Page Application</title>
  <script src="jquery/jquery.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <script src="jquery/datatables.js"></script>
  <script src="bootstrap/bootstrap.js"></script>
  <link id="theme" href="jquery/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
  <link href="jquery/datatables.css" rel="stylesheet">
  <link href="bootstrap/bootstrap.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size:10px;
      }
  </style>
</head>
<body>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">tab1</a></li>
      <li><a href="#tabs-2">tab2</a></li>
      <li><a href="#tabs-3">tab3</a></li>
    </ul>
    <div id="tabs-1">tab1</div>
    <div id="tabs-2">tab2</div>
    <div id="tabs-3">tab3</div>
  </div>
  <script>
    $(function(){
      $("#tabs" ).tabs();
      }); 
  </script>
</body>
</html>

高亮度者為新增加的部分. DataTables 的教學文件與範例參考 :

# https://datatables.net/manual
# https://datatables.net/examples/index

DataTables 的資料來源有三種 :
  1. HTML 表格 (本地)
  2. Javascript 陣列 (本地)
  3. Ajax 取得 (遠端)
本地 HTML 資料來源是將資料直接寫在 HTML 表格的 th 與 td 儲存格中; 而本地 Javascript 資料則是以 Javascript 二維陣列儲存, Ajax 資料在本專案中無法使用 (本機模式無伺服器). 參考 :

# https://datatables.net/examples/data_sources/dom.html (HTML 表格)
# https://datatables.net/examples/data_sources/js_array.html (JSON 物件)

如果資料是放在 HTML 表格中, 則在取得 table 元素的 jQuery 物件後直接呼叫 DataTable() 函數即可產生動態表格 :

$("#mytable").DataTable();

注意, 函數名稱是單數的 DataTable(), 不是 DataTables().

如果資料是放在 Javascript 陣列中, 則必須在呼叫 DataTable() 函數時傳入一個包含 data 與 columns 屬性的物件, data 的值為代表資料的二維陣列; 而 columns 則是代表表格欄位名稱的一維陣列 (具有 title 屬性物件), 例如 :

var dataset=[[row1], [row2], [row3], .... ];
var column_names=[{title: '欄1'}, {title: '欄2'}, {title: '欄3'}, ...];
$("#scores" ).DataTable({data: dataset,
                                          columns: column_names
                                          });

下面範例中, 頁籤 1 資料來源是 HTML 表格, 頁籤 2 與 3 資料來源是 Javascript 陣列, 但頁籤 3 是在 table 元件外加一層 div 容器, 套用 Bootstrap 的 table-responsive 自適應樣式, 這樣當表格資料長寬超過 tabs 時就會出現卷軸 :


範例 5 : DataTables表格

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Single Page Application</title>
  <script src="jquery/jquery.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <script src="jquery/datatables.js"></script>
  <script src="bootstrap/bootstrap.js"></script>
  <link id="theme" href="jquery/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
  <link href="jquery/datatables.css" rel="stylesheet">
  <link href="bootstrap/bootstrap.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size:10px;
      }
  </style>
</head>
<body>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">HTML 表格</a></li>
      <li><a href="#tabs-2">Javascript 陣列</a></li>
      <li><a href="#tabs-3">Javascript 陣列 (自適應)</a></li>
    </ul>
    <div id="tabs-1">
      <table id="scores1">
        <thead>
          <tr>
            <th>姓名</th>
            <th>國文</th>
            <th>英文</th>
            <th>數學</th>
            <th>物理</th>
            <th>化學</th>
            <th>歷史</th>
            <th>地理</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>王小二</td>
            <td>56</td>
            <td>78</td>
            <td>88</td>
            <td>45</td>
            <td>89</td>
            <td>65</td>
            <td>73</td>
          </tr>
          <tr>
            <td>李大明</td>
            <td>86</td>
            <td>93</td>
            <td>79</td>
            <td>85</td>
            <td>90</td>
            <td>87</td>
            <td>75</td>
          </tr>
          <tr>
            <td>張阿花</td>
            <td>100</td>
            <td>98</td>
            <td>75</td>
            <td>95</td>
            <td>89</td>
            <td>100</td>
            <td>95</td>
          </tr>
         </tbody>
      </table>
    </div>
    <div id="tabs-2">
      <table id="scores2"></table>
    </div>
    <div id="tabs-3">
      <div class="container table-responsive">
        <table id="scores3"></table>
      </div>
    </div>
  </div>
  <script>
    $(function(){
      $("#tabs" ).tabs();
      $("#scores1" ).DataTable();
      var columns=[{title: '姓名'},
                   {title: '國文'},
                   {title: '英文'},
                   {title: '數學'},
                   {title: '物理'},
                   {title: '化學'},
                   {title: '歷史'},
                   {title: '地理'}
                   ];
      var data=[['王小二', '56', '78', '88', '45', '89', '65', '73'],
                ['李大明', '86', '93', '79', '85', '90', '87', '75'],
                ['張阿花', '100', '98', '75', '95', '89', '100', '95']];
      $("#scores2" ).DataTable({
        data: data,
        columns: columns,
        autoWidth: true
        });
      $("#scores3" ).DataTable({
        data: data,
        columns: columns
        });
      }); 
  </script>
</body>
</html>

結果如下 :






DataTable() 函數還可以傳入更多選項物件進行表格設定, 參考 :

# https://datatables.net/reference/option/


2020-08-19 補充 :

由於 Bootstrap 會干擾 jQuery UI 的主題佈景樣式, 所以決定拿掉 Bootstrap, 單純使用 jQuery UI 與 DataTables 外掛, 將範例 5 刪除 Bootstrap 並添加主題佈景選擇器後結果如下 :


範例 5-1 : 刪除 Bootstrap 並加入主題佈景選擇器之 DataTables表格

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Single Page Application</title>
  <script src="jquery/jquery.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <script src="jquery/datatables.js"></script>
  <link id="theme" href="jquery/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
  <link href="jquery/datatables.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size:10px;
      }
  </style>
</head>
<body>
  <!-- 主題佈景選擇器 -->
  <select id="themes">
    <option value="base">base</option>
    <option value="black-tie">black-tie</option>
    <option value="blitzer">blitzer</option>
    <option value="cupertino">cupertino</option>
    <option value="dark-hive">dark-hive</option>
    <option value="dot-luv">dot-luv</option>
    <option value="eggplant">eggplant</option>
    <option value="excite-bike">excite-bike</option>
    <option value="flick">flick</option>
    <option value="hot-sneaks">hot-sneaks</option>
    <option value="humanity">humanity</option>
    <option value="le-frog">le-frog</option>
    <option value="mint-choc">mint-choc</option>
    <option value="overcast">overcast</option>
    <option value="pepper-grinder">pepper-grinder</option>
    <option value="redmond">redmond</option>
    <option value="smoothness">smoothness</option>
    <option value="south-street">south-street</option>
    <option value="start">start</option>
    <option value="sunny">sunny</option>
    <option value="swanky-purse">swanky-purse</option>
    <option value="trontastic">trontastic</option>
    <option value="ui-darkness">ui-darkness</option>
    <option value="ui-lightness">ui-lightness</option>
    <option value="vader">vader</option>
  </select>
  <script>
    $(function(){
      $("#themes").selectmenu();
      $("#themes").val("hot-sneaks");
      $("#themes").selectmenu("refresh");
      $('#themes').on('selectmenuchange', function() {
        var theme=$(this).val();
        var href="jquery/themes/" + theme + "/jquery-ui.min.css";
        $("#theme").attr("href", href);
        });
      });
  </script>
  <!-- 頁嵌面板 -->
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">HTML 表格</a></li>
      <li><a href="#tabs-2">Javascript 陣列</a></li>
      <li><a href="#tabs-3">Javascript 陣列 (自適應)</a></li>
    </ul>
    <div id="tabs-1">
      <table id="scores1">
        <thead>
          <tr>
            <th>姓名</th>
            <th>國文</th>
            <th>英文</th>
            <th>數學</th>
            <th>物理</th>
            <th>化學</th>
            <th>歷史</th>
            <th>地理</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>王小二</td>
            <td>56</td>
            <td>78</td>
            <td>88</td>
            <td>45</td>
            <td>89</td>
            <td>65</td>
            <td>73</td>
          </tr>
          <tr>
            <td>李大明</td>
            <td>86</td>
            <td>93</td>
            <td>79</td>
            <td>85</td>
            <td>90</td>
            <td>87</td>
            <td>75</td>
          </tr>
          <tr>
            <td>張阿花</td>
            <td>100</td>
            <td>98</td>
            <td>75</td>
            <td>95</td>
            <td>89</td>
            <td>100</td>
            <td>95</td>
          </tr>
         </tbody>
      </table>
    </div>
    <div id="tabs-2">
      <table id="scores2"></table>
    </div>
    <div id="tabs-3">
      <div class="container table-responsive">
        <table id="scores3"></table>
      </div>
    </div>
  </div>
  <script>
    $(function(){
      $("#tabs" ).tabs();
      $("#scores1" ).DataTable();
      var columns=[{title: '姓名'},
                   {title: '國文'},
                   {title: '英文'},
                   {title: '數學'},
                   {title: '物理'},
                   {title: '化學'},
                   {title: '歷史'},
                   {title: '地理'}
                   ];
      var data=[['王小二', '56', '78', '88', '45', '89', '65', '73'],
                ['李大明', '86', '93', '79', '85', '90', '87', '75'],
                ['張阿花', '100', '98', '75', '95', '89', '100', '95']];
      $("#scores2" ).DataTable({
        data: data,
        columns: columns,
        autoWidth: true
        });
      $("#scores3" ).DataTable({
        data: data,
        columns: columns
        });
      });   
  </script>
</body>
</html>

張貼者： 於
標籤： , , , ,

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )