iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
1
Modern Web

30天學習30套前端技術(2018年)系列 第 1

[十分鐘學習] DataTables - 替表格穿上鋼鐵衣

example1

DataTables是jQuery的JavaScript函式庫,目的是強化表格操作(如搜尋、排序),並自動加入元件引入表格中,使用非常靈活且簡易

GitHub Star: 5,100
Javascripting Overall: 77%
瀏覽器: ChromeFirefoxIE8+
RWD: 支援
License: MIT


《安裝》

  • CDN

    <!-- jQuery v1.9.1 -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- DataTables v1.10.16 -->
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    
  • npm

    $ npm install datatables.net
    $ npm install datatables.net-dt
    
  • Bower

    $ bower install datatables.net --save 
    $ bower install datatables.net-dt --save
    

《範例》

  • 可搜尋、資訊和換頁的表格

    <table class="example">
    	<thead>
    		<tr>
    			<td></td>
    			...
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td></td>
    			...
    		</tr>
    	</tbody>
    </table>
    <script>
    	$( ".example" ).DataTable();
    </script>
    
  • 標題置頂的表格

    example1

    <table class="example">
    	<thead>
    		<tr>
    			<td></td>
    			...
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td></td>
    			...
    		</tr>
    	</tbody>
    </table>
    <!-- fixedHeader.dataTables v3.1.3 -->
    <link href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.dataTables.min.css" rel="stylesheet" />
    <script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"></script>
    <script>
    	$( ".example" ).DataTable({
    		// 參數設定[註1]
    		"bPaginate": false, // 顯示換頁
    		"searching": false, // 顯示搜尋
    		"info":	false, // 顯示資訊
    		"fixedHeader": true, // 標題置頂
    	});
    </script>
    

    [註1]

    參數 預設值 描述
    bPaginate true 顯示換頁
    searching true 顯示搜尋
    info true 顯示資訊
    fixedHeader false 標題置頂

《延伸》

  1. DataTables | Table plug-in for jQuery
  2. DataTables/DataTables: Tables plug-in for jQuery

下一篇
[十分鐘學習] Lazy Load - 上班打卡外,圖片也要壓線載入
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言