子資料列（顯示額外/詳細資訊）
DataTables API 有許多方法可以將子資料列附加到 DataTable 中的父資料列。這可以用於顯示關於資料列的額外資訊，這在您希望傳達關於資料列的更多資訊，而主表格中沒有足夠空間的情況下非常有用。
下面的範例使用了 row().child 方法，首先檢查資料列是否已經顯示，如果是，則隱藏它 (row().child.hide())，否則顯示它 (row().child.show())。此範例中子資料列的內容由 format() 函式定義，但您可以將其替換為您想顯示的任何內容，可能包括例如一個向伺服器發出的 Ajax 呼叫，以獲取任何額外資訊。
| 姓名 | 職位 | 辦公室 | 薪資 | |
|---|---|---|---|---|
| 姓名 | 職位 | 辦公室 | 薪資 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 評論
以下顯示的 Javascript 用於初始化此範例中顯示的表格
// 資料列詳細資訊的格式化函式 - 根據需要修改 function format(d) { // `d` 是資料列的原始資料物件 return ( '<dl>' + '<dt>全名:</dt>' + '<dd>' + d.name + '</dd>' + '<dt>分機號碼:</dt>' + '<dd>' + d.extn + '</dd>' + '<dt>額外資訊:</dt>' + '<dd>還有任何進一步的詳細資訊（圖片等）...</dd>' + '</dl>' ); } var table = $('#example').DataTable({ ajax: '../ajax/data/objects.txt', columns: [ { className: 'dt-control', orderable: false, data: null, defaultContent: '' }, { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'salary' } ], order: [[1, 'asc']] }); // 為開啟和關閉詳細資訊新增事件監聽器 $('#example tbody').on('click', 'td.dt-control', function () { var tr = $(this).closest('tr'); var row = table.row(tr); if (row.child.isShown()) { // 這個資料列已經打開 - 關閉它 row.child.hide(); } else { // 開啟這個資料列 row.child(format(row.data())).show(); } });
// 資料列詳細資訊的格式化函式 - 根據需要修改 function format(d) { // `d` 是資料列的原始資料物件 return ( '<dl>' + '<dt>全名:</dt>' + '<dd>' + d.name + '</dd>' + '<dt>分機號碼:</dt>' + '<dd>' + d.extn + '</dd>' + '<dt>額外資訊:</dt>' + '<dd>還有任何進一步的詳細資訊（圖片等）...</dd>' + '</dl>' ); } let table = new DataTable('#example', { ajax: '../ajax/data/objects.txt', columns: [ { className: 'dt-control', orderable: false, data: null, defaultContent: '' }, { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'salary' } ], order: [[1, 'asc']] }); // 為開啟和關閉詳細資訊新增事件監聽器 table.on('click', 'td.dt-control', function (e) { let tr = e.target.closest('tr'); let row = table.row(tr); if (row.child.isShown()) { // 這個資料列已經打開 - 關閉它 row.child.hide(); } else { // 開啟這個資料列 row.child(format(row.data())).show(); } });
除了上面的程式碼之外，還載入了以下 Javascript 函式庫檔案以供此範例使用
以下顯示的 HTML 是原始的 HTML 表格元素，在它被 DataTables 增強之前
此範例使用了一些超出從函式庫檔案載入的額外 CSS（如下所示），以便正確顯示表格。使用的額外 CSS 如下所示
以下 CSS 函式庫檔案已載入供此範例使用，以提供表格的樣式
此表格透過 Ajax 載入資料。以下顯示已載入的最新資料。當載入任何其他資料時，此資料將自動更新。
以下顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，使用DataTables 文件中描述的協定。