jquery - 设置自定义文件名 datatables export excelHtml5 with a select text

Question

我想知道如何设置自定义文件名以通过选择在数据表按钮 excelHtml5 中导出，我做了一个函数来传递名称但没有设置它发布我的 js 代码。有了警报，它反射(reflect)了变化，但是当我调用数据表中的 excel 按钮时，它变空了。

代码如下:

var reportName = '24 afterhours ';
$('#example').DataTable({
   dom: 'Bfrtip',
   buttons: [
      {
         extend: 'excelHtml5',
         title: reportName
      },
      {
         extend: 'pdfHtml5',
         title: 'Data export'
      }
  ]
});

$('#campaing').change(function() {
   reportName += $(this).find(":selected").text() + ' report';
});

我想我可能遗漏了什么。

Answer 1

title在dataTable初始化时读取一次，然后将值映射到内部config目的。因此，如果您想动态更改设置，则必须更改内部 config对象，而不是尝试更改只读配置设置。

所以反过来做 - 为 <select> 创建一个事件监听器在 按钮内 init()回调本身。如果你有 <select>像这样的可选文件名

<select id="filename">
    <option value="filenameA">filename A</option>
    <option value="filenameB">filename B</option>
    <option value="filenameC">filename C</option>
</select>

然后你可以动态改变导出fileName (== title + extension ) 作者:

buttons : [
   {
    extend: 'excelHtml5',
    title: 'filenameA', //default filename
    init: function(dt, node, config) {
        $("#filename").on('change', function() {
            config.title = this.value;
        })
    }
},

您也可以在处理程序中更改其他配置属性，例如您可能想要更改 config.extension到别的东西。

---

这是一个演示 -> https://jsfiddle.net/y8d9zhfv/ 需要强调的是，需要 dataTables.buttons.js 1.3.0 或更高版本； buttons.html5.js 模块也是如此。因此，如果以上方法不起作用升级 -> https://cdn.datatables.net/buttons/