Rename excel file when exporting a datatable in Jquery

Question

I am using jQuery DataTables. I added Export to Excel button. On click, a prompt will show up and ask you to enter filename.

filename: function () { 
var txt = prompt("Enter the filename :");
return txt; }

It works fine but I want to use SweetAlert input as visually it looks better. The problem is the prompt shows up but the file is exported before the user types the filename.

swal("Enter the filename :", {
  content: "input",
})
.then((value) => {
  return value;
});

I am returning the input value directly after typing the filename. Any suggestions please what I am missing in my code ? Thank you very much.

$(document).ready(function() {

var table = $('#example').DataTable( {
"dom": 'Btri',
"searching" : false,
"paging" : false,
"info" : false,
buttons: [ {
extend: 'excelHtml5',
className: 'btn btn-primary btn-sm',
text: 'Export',
autoFilter: true,
attr:  { id: 'exportButton' },
sheetName: 'data',
title: '',
filename: function () { 
//var txt = prompt("Enter the filename :");
//return txt; 
swal("Enter the filename :", {
  content: "input",
})
.then((value) => {
  return value;
});
}
}]

} );

  
        
} );


















        
            
                Name
                Position
                Office
                Age
                Start date
                Salary
            
        
        
           
                Tiger Nixon
                System Architect
                Edinburgh
                61
                2011/04/25
                $320,800
            
            
                Garrett Winters
                Accountant
                Tokyo
                63
                2011/07/25
                $170,750

gaetanoM · Accepted Answer

A simple workaround can be based on adding a mousedown event to the button.

$(document).on('mousedown', '#exportButton', function(e) {
    swal("Enter the filename :", {
        content: "input",
    }).then(function (value) {
        if (value.trim().length > 0)
            $('#exportButton').data('filename', value).trigger('click');
    });
})
var table = $('#example').DataTable({
    "dom": 'Btri',
    "searching": false,
    "paging": false,
    "info": false,
    buttons: [{
        extend: 'excelHtml5',
        className: 'btn btn-primary btn-sm',
        text: 'Export',
        autoFilter: true,
        attr: {id: 'exportButton'},
        sheetName: 'data',
        title: '',
        filename: function ( ) {
            return $('#exportButton').data('filename');
        }
    }]
});




















    
    
        Name
        Position
        Office
        Age
        Start date
        Salary
    
    
    
    
        Tiger Nixon
        System Architect
        Edinburgh
        61
        2011/04/25
        $320,800
    
    
        Garrett Winters
        Accountant
        Tokyo
        63
        2011/07/25
        $170,750

Rename excel file when exporting a datatable in Jquery

Answers (1)

Related Questions