列詳細資訊
此範例展示了 DataTables 顯示和隱藏附加到主表格父列的子列的功能。這通常用於顯示有關列的額外資訊，特別是當您希望傳達比主表格中空間更多的有關列的資訊時。
以下範例顯示了伺服器端處理與附加了事件監聽器的第一欄一起使用，該事件監聽器將切換子列的顯示。這是使用 columns.data 和 columns.defaultContent 設定的，並結合 CSS 來顯示帶有背景圖片的空單元格，可以點擊該圖片。
事件處理程式使用 row().child 方法首先檢查是否已顯示列，如果是則隱藏它，如果不是則顯示它。在此範例中，子列的內容由 format() 函數定義，但您將使用您想要顯示的所需內容來替換它，可能包括例如對伺服器的 Ajax 呼叫以取得要顯示的額外資訊。請注意，格式詳細資訊函數可以存取該列的完整資料來源物件，包括表格中未實際顯示的資訊（例如薪資參數）。
此外，此範例與 客戶端列詳細資訊範例 之間的一個小差異是，為了讓列在表格重新繪製時自動重新開啟，我們需要追蹤每一列的唯一識別碼 - 在此範例中為列的 id。這是必需的，因為在伺服器端處理模式下，列會在每次繪製時自動銷毀並重新建立。
| 名字 | 姓氏 | 職位 | 辦公室 | |
|---|---|---|---|---|
| 名字 | 姓氏 | 職位 | 辦公室 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
function format(d) { return ( '全名: ' + d.first_name + ' ' + d.last_name + '<br>' + '薪資: ' + d.salary + '<br>' + '子列可以包含您想要的任何資料，包括連結、圖片、內部表格等。' ); } var table = $('#example').DataTable({ ajax: 'scripts/ids-objects.php', columns: [ { class: 'dt-control', orderable: false, data: null, defaultContent: '' }, { data: 'first_name' }, { data: 'last_name' }, { data: 'position' }, { data: 'office' } ], order: [[1, 'asc']], processing: true, serverSide: true }); // 追蹤已顯示詳細資訊列的 id 的陣列 var detailRows = []; $('#example tbody').on('click', 'tr td.dt-control', function () { var tr = $(this).closest('tr'); var row = table.row(tr); var idx = detailRows.indexOf(tr.attr('id')); if (row.child.isShown()) { tr.removeClass('details'); row.child.hide(); // 從「開啟」陣列中移除 detailRows.splice(idx, 1); } else { tr.addClass('details'); row.child(format(row.data())).show(); // 新增至「開啟」陣列 if (idx === -1) { detailRows.push(tr.attr('id')); } } }); // 在每次繪製時，迴圈遍歷 `detailRows` 陣列並顯示任何子列 table.on('draw', function () { detailRows.forEach(function (id, i) { $('#' + id + ' td.dt-control').trigger('click'); }); });
function format(d) { return ( '全名: ' + d.first_name + ' ' + d.last_name + '<br>' + '薪資: ' + d.salary + '<br>' + '子列可以包含您想要的任何資料，包括連結、圖片、內部表格等。' ); } const table = new DataTable('#example', { ajax: 'scripts/ids-objects.php', columns: [ { class: 'dt-control', orderable: false, data: null, defaultContent: '' }, { data: 'first_name' }, { data: 'last_name' }, { data: 'position' }, { data: 'office' } ], order: [[1, 'asc']], processing: true, serverSide: true }); // 追蹤已顯示詳細資訊列的 id 的陣列 const detailRows = []; table.on('click', 'tbody td.dt-control', function () { let tr = event.target.closest('tr'); let row = table.row(tr); let idx = detailRows.indexOf(tr.id); if (row.child.isShown()) { tr.classList.remove('details'); row.child.hide(); // 從「開啟」陣列中移除 detailRows.splice(idx, 1); } else { tr.classList.add('details'); row.child(format(row.data())).show(); // 新增至「開啟」陣列 if (idx === -1) { detailRows.push(tr.id); } } }); // 在每次繪製時，迴圈遍歷 `detailRows` 陣列並顯示任何子列 table.on('draw', () => { detailRows.forEach((id, i) => { let el = document.querySelector('#' + id + ' td.dt-control'); if (el) { el.dispatchEvent(new Event('click', { bubbles: true })); } }); });
除了上述程式碼之外，還會載入以下 Javascript 函式庫檔案以在此範例中使用
以下顯示的 HTML 是原始 HTML 表格元素，在 DataTables 增強之前
此範例使用一些額外的 CSS（超出從函式庫檔案載入的 CSS（如下所示）），以便正確顯示表格。使用的額外 CSS 如下所示
以下 CSS 函式庫檔案已載入以供在此範例中使用，以提供表格的樣式
此表格透過 Ajax 載入資料。以下顯示已載入的最新資料。此資料將在載入任何其他資料時自動更新。
以下顯示用於執行此表格伺服器端處理的腳本。請注意，這僅是使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，使用 DataTables 文件中描述的協定。