Hike News
Hike News

jQuery 表格插件 DataTables

jQuery, library, 類型, 表格類

簡介

這是用 jQuery 快速建立表格的套件

表格的樣式和功能可以用 HTML 的 table 標籤和 Javascript 做設定

資料不只可以建立在 HTML 也可以用 Ajax 取得

官網：https://datatables.net

初始化

  • 按照官網介紹的簡單三步驟
  1. 載入 CSS、JS 2 個檔案
1
2
3
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
  1. 載入基本表格
1
2
3
$(document).ready( function () {
    $('#myTable').DataTable();
} );
  1. 網頁就會看到表格

HTML 設定

  • 最基本要有 <table id="myTable"> 的標籤，id 是要用 jQuery 綁定使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table id="myTable" class="display">
  <thead>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
    </tr>
    
    ...
    
  </tbody>
</table>

  • <thead> 標籤作為表頭列是必要的

    • 一般表頭
1
2
3
4
5
6
<thead>
  <tr>
    <th>Title 1</th>
    <th>Title 2</th>
  </tr>
</thead>

  • 複合式表頭，下方是官網所提供的範例 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <thead>
      <tr>
        <th rowspan="2">Name</th>
        <th colspan="2">HR Information</th>
        <th colspan="3">Contact</th>
      </tr>
      <tr>
        <th>Position</th>
        <th>Salary</th>
        <th>Office</th>
        <th>Extn.</th>
        <th>E-mail</th>
      </tr>
    </thead>

  • 在 <table id="myTable"> 的設定

  • class="display" 的 class 有 8 種表格樣式，可變換 滑鼠滑入變色 、 間隔行列換色 、 隱藏格線 …等

  • 固定每頁的數量 data-page-length="25" ，預設會產生分頁，若是不需要就要到 JS 設定

  • 使用data-*屬性

  • 或是使用官網提供的 Theme creator 主題樣式產生器

JS 設定

1
2
3
4
5
$(document).ready(function() {
  $('#myTable').DataTable( {
    // 表格的設定放在這
  } );
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$('#myTable').DataTable( {
  // 在初始表格的左上有個可選擇的每頁列數的選單設定
  lengthChange: true,   // 呈現選單
  lengthMenu: [5, 10, 25, 50],   // 選單值設定
  pageLength: 25,   // 不用選單設定也可改用固定每頁列數
  
  searching: true,   // 搜索功能
  ordering: true,   // 開啟排序
  
  // 下列 2 個一起用，就可以設定列出全部資料、可滑動又固定尺寸的表格
  paging: false,   // 是否建立分頁
  scrollY: 400,   // 固定可以上下滑動的高度
  
  // [指定的列 , 排序方向] 。
  // 預設 [[0, 'asc']] ，asc 升冪排列、desc 降冪排列。
  order: [[ 1, 'asc' ], [ 2, 'asc' ]],
  
  // 鎖定行
  columnDefs: [{
    targets: [3],
    // 禁止排序
    orderable: false,
  }]
} );

語言設定

預設是英文，修改有 2 種方式

第一種 - 直接在 JavaScript 寫入 Language options 作單獨修改

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function() {
  $('#example').DataTable( {
		"language": {
      "lengthMenu": "顯示 _MENU_ 項結果",
      "zeroRecords": "沒有符合的結果",
      "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
      "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
      "search": "搜尋:"
    }
  });
});

第兩種 - 先下載 設定語言 檔案再把的檔案載入

1
2
3
4
5
6
7
$('#myTable').DataTable( {
	...
	
  "language": {
    "url": "dataTables.german.lang"
  }
}

可載入的語言列表