如何修改DataTable按钮导出扩展？导出显示与列控制问题咨询

嘿，这两个问题都是使用jQuery DataTables导出扩展时的常见痛点，我来给你一步步解决：

修改导出按钮的方式有很多种，取决于你想要调整的是外观、文本还是导出内容，这里给几个常用场景的示例：

• 自定义按钮文本与样式：直接在按钮配置里指定text和className就能改按钮显示文字和样式，比如把默认的“Excel”改成中文，再加个自定义样式类：

$('#your-table').DataTable({
  dom: 'Bfrtip',
  buttons: [
    {
      extend: 'excelHtml5',
      text: '导出Excel表格',
      className: 'btn btn-primary custom-export-btn'
    }
  ]
});

• 自定义导出的内容格式：如果需要修改导出时单元格的内容（比如把状态码转成文字、格式化日期），可以用exportOptions里的format函数：

buttons: [
  {
    extend: 'pdfHtml5',
    exportOptions: {
      format: {
        body: function(data, row, column, node) {
          // 示例：把布尔值转成中文表述
          return data === '1' ? '已完成' : '未完成';
        }
      }
    }
  }
]

• 完全自定义按钮行为：要是默认的导出逻辑满足不了你，还可以写自己的按钮逻辑，不用依赖内置的extend：

buttons: [
  {
    text: '一键导出筛选数据',
    action: function(e, dt, node, config) {
      // 这里可以获取当前筛选后的表格数据
      var filteredData = dt.rows({ search: 'applied' }).data().toArray();
      // 接下来就可以自己处理这些数据，比如生成自定义格式的文件
      console.log('要导出的数据：', filteredData);
    }
  }
]

咱们拆分来看：

2.1 保留“show no entries”提示 #

这个问题大概率是你配置dom参数时漏掉了信息元素的标识。DataTables的dom参数用来控制页面上各个组件的排列，默认包含i（信息区域，就是显示“show no entries”或者“显示X到X条共X条”的地方）。当你加导出按钮时，要是只写了dom: 'Bfrtip'，这里面没有i，所以信息区域就不渲染了。

只需要把i加回dom配置里就行，比如：

$('#your-table').DataTable({
  dom: 'Blfrtip', // B=按钮，l=每页条数选择，f=搜索框，r=加载提示，t=表格，i=信息，p=分页
  buttons: ['excel', 'pdf', 'print'],
  // 其他配置...
});

调整i的位置就能改变信息区域在页面上的位置，比如放在分页后面就写dom: 'Bfrtpi'。

2.2 仅导出/打印指定列 #

这个用exportOptions里的columns参数就能轻松实现，支持多种指定方式：

• 导出指定索引的列：比如要导出第0、1、2列（前三列），就直接传索引数组：

buttons: [
  {
    extend: 'excelHtml5',
    exportOptions: {
      columns: [0, 1, 2]
    }
  }
]

• 排除最后一列（CRUD操作列）：如果你的表格最后一列是编辑/删除按钮，不想导出它，用:not(:last)就能排除：

buttons: [
  {
    extend: 'print',
    exportOptions: {
      columns: ':not(:last)'
    }
  }
]

• 按类名指定导出列：要是列的索引可能变化，还可以给需要导出的列加个class（比如exportable），然后用类名指定：

<!-- 表格里给要导出的列加class -->
<th class="exportable">姓名</th>
<th class="exportable">邮箱</th>
<th>操作</th>

buttons: [
  {
    extend: 'pdfHtml5',
    exportOptions: {
      columns: '.exportable'
    }
  }
]

内容的提问来源于stack exchange，提问作者JOnatha Flint