使用选择文本设置自定义文件名数据表导出 excelHtml5

问题描述

我想知道如何设置自定义文件名以使用选择在数据表按钮 excelHtml5 中导出，我做了一个传递名称的函数，但没有在我的 js 代码后设置它.带有警报，它反映了更改，但是当我调用数据表中的 excel 按钮时，它会变空.

I'm wondering how to set a custom filename to export in datatables buttons excelHtml5 with a select, I did a function to pass the name but is not setting it ill post my js code. with the alert it is reflecting the changes but when i call the excel button in datatables is coming empty.

代码如下:

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';
});

我想我可能遗漏了一些东西.

I think I might be missing something.

推荐答案

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

title is read once when the dataTable is initialised, and then the value is mapped into the internal config object. Therefore, if you want to change settings dynamically, you must change that internal config object, not try to change the readonly configuration settings.

所以反过来做 - 为 inside 按钮 init() 回调本身创建一个事件监听器.如果你有一个带有可选文件名的

So do it the other way around - create an event listener for the <select> inside the buttons init() callback itself. If you have a <select> with optional filenames like this

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

然后你可以通过

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

您也可以从处理程序中更改其他配置属性，例如您可能希望将 config.extension 更改为其他内容.

You can change the other config properties from within the handler as well, for example you might want change config.extension to something else.

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

Here is a demo -> https://jsfiddle.net/y8d9zhfv/It is important to emphasize, that dataTables.buttons.js 1.3.0 or higher is required; this is also the case with the buttons.html5.js module. So if the above not work upgrade -> https://cdn.datatables.net/buttons/

这篇关于使用选择文本设置自定义文件名数据表导出 excelHtml5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！