格式化输出数据 - 正交数据
按钮有两种不同的方法可用于不同于表格中显示的数据来格式化导出的数据：本示例中显示的正交选项和格式化函数。它们从本质上通过不同的方式实现相同的效果：即修改输出数据。
正交选项基于DataTables 对正交数据的支持 - 特别是能够使用columns.render作为对象来为 DataTables 提供用于不同操作所需的不同数据。
默认情况下，按钮会要求在表格中显示的相同数据（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 文档中描述的协议。