複雜表格標題 - 選取的標題列
如同其配套範例，此範例展示 Buttons 的多列標題和頁尾處理，但在這種情況下，它展示如何將匯出限制為特定列，而不是在匯出中包含標題/頁尾中的所有列。如果您在標題中有一列用於搜尋輸入元素，而這些元素在匯出資料中不相關，這可能會很有用，如此處所示。
若要在標題的輸出中僅包含一列，我們可以使用每個按鈕的 exportOptions 的 customizeData 回呼函式（請參閱 buttons.exportData() 以取得匯出選項的完整可用選項清單）來操作要匯出的資料 - 在這種情況下，從標題中移除一列。此函數在該頁面使用的所有按鈕之間共享，以幫助提高程式碼可讀性並縮減大小。
| 姓名 | 職位 | 辦公室 | 分機 | 開始日期 | 薪資 |
|---|---|---|---|---|---|
| 姓名 | 職位 | 辦公室 | 分機 | 開始日期 | 薪資 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 評論
下方顯示的 Javascript 用於初始化此範例中顯示的表格
var exportOptions = { customizeData: function (data) { // 移除第二個標題列，方法是將其從陣列中彈出 data.headerStructure.pop(); console.log(data); } }; $('#example').DataTable({ ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], layout: { topStart: { buttons: [ { extend: 'copyHtml5', exportOptions: exportOptions }, { extend: 'excelHtml5', exportOptions: exportOptions }, { extend: 'pdfHtml5', exportOptions: exportOptions } ] } }, initComplete: function () { this.api() .columns() .every(function () { // 從第二個標題列取得輸入元素 var input = $('input', this.header(1)); var column = this; // 使用者輸入的事件監聽器 input.on('keyup', function () { if (column.search() !== input.val()) { column.search(input.val()).draw(); } }); }); } });
let exportOptions = { customizeData: function (data) { // 移除第二個標題列，方法是將其從陣列中彈出 data.headerStructure.pop(); console.log(data); } }; new DataTable('#example', { ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], layout: { topStart: { buttons: [ { extend: 'copyHtml5', exportOptions: exportOptions }, { extend: 'excelHtml5', exportOptions: exportOptions }, { extend: 'pdfHtml5', exportOptions: exportOptions } ] } }, initComplete: function () { this.api() .columns() .every(function () { // 從第二個標題列取得輸入元素 let input = this.header(1).querySelector('input'); let column = this; // 使用者輸入的事件監聽器 input.addEventListener('keyup', () => { if (column.search() !== input.value) { column.search(input.value).draw(); } }); }); } });
除了上述程式碼之外，還載入下列 Javascript 函式庫檔案以供本範例使用
下方顯示的 HTML 是原始的 HTML 表格元素，在經過 DataTables 增強之前
本範例使用了一些超出從函式庫檔案（如下所示）載入的額外 CSS，以便正確顯示表格。使用的額外 CSS 如下所示
thead input { width: 100%; padding: 3px; box-sizing: border-box; }
載入下列 CSS 函式庫檔案以供本範例使用，以提供表格的樣式
此表格透過 Ajax 載入資料。下方顯示已載入的最新資料。當載入任何其他資料時，此資料將自動更新。
下方顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，使用DataTables 文件中描述的協定。