帶有 StateSave 的子行
DataTables API 有許多方法可以將子行附加到 DataTable 中的父行。這可以用來顯示關於一行的額外資訊，對於您希望傳達比主表格中空間更多的行資訊的情況很有用。
下面的範例使用了 stateSave 和 row().child 方法，首先檢查是否已顯示行，如果是，則隱藏它 (row().child.hide())，否則顯示它 (row().child.show())。此範例中子行的內容由 format() 函式定義，但您可以將其替換為您想要顯示的任何內容，例如，包括向伺服器發出 Ajax 呼叫以獲取任何額外資訊。
由於 state save 元素，可以跨重新載入維護此範例的狀態。使用者必須為 requestChild.dt 添加一個監聽器，以任何他們喜歡的格式顯示行。
監聽器也必須在表格初始化之前設定，否則當嘗試載入狀態時，監聽器中設定的功能將不可用。
| 姓名 | 職位 | 辦公室 | 薪資 | |
|---|---|---|---|---|
| 姓名 | 職位 | 辦公室 | 薪資 |
- 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']], rowId: 'id', stateSave: true }); table.on('requestChild.dt', function (e, row) { row.child(format(row.data())).show(); }); // 新增用於開啟和關閉詳細資訊的事件監聽器 $('#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']], rowId: 'id', stateSave: true }); table.on('requestChild.dt', function (e, row) { row.child(format(row.data())).show(); }); // 新增用於開啟和關閉詳細資訊的事件監聽器 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 如下所示
載入了以下 CSS 函式庫檔案，以便在此範例中使用，以提供表格的樣式
此表格透過 Ajax 載入資料。下面顯示的是已載入的最新資料。當任何額外資料載入時，此資料將自動更新。
下面顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，並使用DataTables 文件中描述的協定。