格式化輸出資料 - 正交資料
Buttons 有兩種不同的方法可以格式化匯出的資料，使其與表格中顯示的資料不同：正交選項（如本範例所示）和格式化函式。它們基本上以不同的方式達到相同的目的：即修改輸出資料。
正交選項基於 DataTables 對正交資料的支援 - 特別是可以將 columns.render 作為一個物件用於函式，以便為 DataTables 提供不同動作所需的不同資料。
預設情況下，Buttons 會要求與表格中顯示的相同資料（display），但是 exportOptions 參數的 orthogonal 選項可用於指定不同的資料點。在本範例中，匯出按鈕的正交資料設定為 export，而 columns.render 函式將返回一個取消格式化的字串（從最後一列中移除 $ 和 , 字元以使其成為數值）。
| 姓名 | 職位 | 辦公室 | 分機 | 開始日期 | 薪資 |
|---|---|---|---|---|---|
| 姓名 | 職位 | 辦公室 | 分機 | 開始日期 | 薪資 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
$('#example').DataTable({ ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary', render: function (data, type, row) { return type === 'export' ? data.replace(/[$,]/g, '') : data; } } ], layout: { topStart: { buttons: [ { extend: 'copyHtml5', exportOptions: { orthogonal: 'export' } }, { extend: 'excelHtml5', exportOptions: { orthogonal: 'export' } }, { extend: 'pdfHtml5', exportOptions: { orthogonal: 'export' } } ] } } });
new DataTable('#example', { ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary', render: function (data, type, row) { return type === 'export' ? data.replace(/[$,]/g, '') : data; } } ], layout: { topStart: { buttons: [ { extend: 'copyHtml5', exportOptions: { orthogonal: 'export' } }, { extend: 'excelHtml5', exportOptions: { orthogonal: 'export' } }, { extend: 'pdfHtml5', exportOptions: { orthogonal: 'export' } } ] } } });
除了以上程式碼外，還會載入以下 Javascript 函式庫檔案以供本範例使用
以下顯示的 HTML 是原始的 HTML 表格元素，在經過 DataTables 增強之前
此範例使用了一些額外的 CSS（除了從函式庫檔案載入的 CSS（如下所示）），以便正確顯示表格。使用的額外 CSS 如下所示
為了提供表格的樣式，會載入以下 CSS 函式庫檔案以供本範例使用
此表格透過 Ajax 載入資料。以下顯示已載入的最新資料。當載入任何其他資料時，此資料將自動更新。
以下顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，使用 DataTables 文件中描述的協定。