设置自定义文件名datatables导出带有选择文本的excelHtml5

Question

我想知道如何设置一个自定义文件名导出数据表按钮excelHtml5与选择,我做了一个功能来传递名称,但没有设置它生病了我的js代码.警报它反映了变化,但当我调用数据表中的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/