簡介
這是用 jQuery 快速建立表格的套件
表格的樣式和功能可以用 HTML 的 table 標籤和 Javascript 做設定
資料不只可以建立在 HTML 也可以用 Ajax 取得
官網:https://datatables.net
初始化
- 載入 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 2 3
| $(document).ready( function () { $('#myTable').DataTable(); } );
|
- 網頁就會看到表格
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>
|
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, paging: false, scrollY: 400, 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" } }
|
可載入的語言列表