Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

jquery - Setting up a custom file name datatables export excelHtml5 with a select text

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.

Here is the code:

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.

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>

Then you can dynamically change the export fileName (== title + extension) by

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

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


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/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...