子資料列
此範例示範如何透過新增 requestChild 的監聽器，將子資料列與 StateRestore 整合。
DataTables API 有許多方法可將子資料列附加到 DataTable 中的資料列。這可用於顯示資料列的額外資訊，適用於您希望傳達比主表格中空間更多的資料列資訊的情況。
在此，當觸發 requestChild 事件時，會使用 row().child() API 方法顯示儲存在狀態中的每個資料列。
| 名稱 | 職位 | 辦公室 | 薪資 | |
|---|---|---|---|---|
| 名稱 | 職位 | 辦公室 | 薪資 |
- 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: '../data/objects.txt', columns: [ { className: 'dt-control', orderable: false, data: null, defaultContent: '' }, { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'salary' } ], layout: { topStart: { buttons: ['createState', 'savedStates'] } }, order: [[1, 'asc']], rowId: 'id' }); // 狀態處理，用於還原子資料列 table.on('requestChild', function (e, row) { row.child(format(row.data())).show(); }); // 新增事件監聽器，用於開啟和關閉詳細資訊 table.on('click', 'tbody 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: '../data/objects.txt', columns: [ { className: 'dt-control', orderable: false, data: null, defaultContent: '' }, { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'salary' } ], layout: { topStart: { buttons: ['createState', 'savedStates'] } }, order: [[1, 'asc']], rowId: 'id' }); // 狀態處理，用於還原子資料列 table.on('requestChild', function (e, row) { row.child(format(row.data())).show(); }); // 新增事件監聽器，用於開啟和關閉詳細資訊 table.on('click', 'tbody 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
td.details-control { background: url('../resources/details_open.png') no-repeat center center; cursor: pointer; } tr.shown td.details-control { background: url('../resources/details_close.png') no-repeat center center; }
載入下列 CSS 程式庫檔案，以供此範例中使用，以提供表格的樣式
此表格透過 Ajax 載入資料。下面顯示了已載入的最新資料。當載入任何額外資料時，此資料將自動更新。
以下顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，並使用 DataTables 文件中描述的協定。