格式化输出数据 - 导出选项
按钮有两种不同的方法用于以不同于表中显示数据的格式导出数据：正交选项和此示例中所示的格式化功能。两种方法基本上以不同方式实现相同目标：即修改输出数据。
导出按钮的格式化功能通过向 exportOptions 对象的 format 对象的一个（或多个）函数分配函数来指定。可使用三种格式化功能：header、footer 和 body。这是使用格式化功能优于正交数据的主要优势 - 标头和页脚也可以使用此方法进行格式化（当然，如果您愿意，正交和此格式化函数方法可以同时使用！）。
本示例使用 body 格式化函数从最后一列中删除 $ 和 , 字符，使其成为输出数据中的数字值。由于这三个导出按钮的使用情况都相同，所以将函数放置到一个对象中，由每个按钮重复使用 - 只是为了节省代码重复的数量！这是没有必要的，但它可能是一种有用的技术。
| 姓名 | 职位 | 办公室 | 分机号 | 开始日期 | 薪水 |
|---|---|---|---|---|---|
| 姓名 | 职位 | 办公室 | 分机号 | 开始日期 | 薪水 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
以下所示的 Javascript 用于初始化本示例中所示的数据表
var exportFormatter = { format: { body: function (data, row, column, node) { // 从薪水列中去掉$以使其成为数字值 return column === 5 ? data.replace(/[$,]/g, '') : 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: exportFormatter }, { extend: 'excelHtml5', exportOptions: exportFormatter }, { extend: 'pdfHtml5', exportOptions: exportFormatter } ] } } });
让 exportFormatter = { format: { body: function (data, row, column, node) { // 从薪水列中去除 $ 使它变成数字 return column === 5 ? data.replace(/[$,]/g, '') : 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: exportFormatter }, { extend: 'excelHtml5', exportOptions: exportFormatter }, { extend: 'pdfHtml5', exportOptions: exportFormatter } ] } } });
除上述代码外，还加载了以下 Javascript 库文件用于此示例
以下所示的 HTML 是原始 HTML 表格元素，尚未通过 DataTables 进行增强
此示例使用了额外的少量 CSS，超出库文件（见下文），为了正确显示表格。所用的附加 CSS 如下所示
加载了以下 CSS 库文件用于此示例，为表格提供样式
此表格通过 Ajax 加载数据。加载的最新数据显示在下面。此数据将自动更新，因为有额外的加载数据。
执行此表格的服务器端处理所用的脚本如下所示。请注意，这是一个仅仅使用 PHP 的示例脚本。服务器端处理脚本可以使用任何语言编写，使用 DataTables 文档中描述的协议。