在 Jquery 中导出数据表时重命名 excel 文件
Rename excel file when exporting a datatable in Jquery
我正在使用 jQuery DataTables. I added Export to Excel button。单击时,将出现提示并要求您输入文件名。
filename: function () {
var txt = prompt("Enter the filename :");
return txt; }
它工作正常,但我想使用 SweetAlert input,因为它在视觉上看起来更好。
问题是出现了提示,但在用户键入文件名之前文件已导出。
swal("Enter the filename :", {
content: "input",
})
.then((value) => {
return value;
});
我在输入文件名后直接返回输入值。请问我的代码中缺少什么建议?非常感谢。
$(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;
});
}
}]
} );
} );
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.bootstrap4.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<table id="example" class="table table-bordered table-hover nowrap" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>0,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,750</td>
</tr>
</tbody>
</table>
一个简单的解决方法是向按钮添加 mousedown 事件。
$(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');
}
}]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.bootstrap4.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<table id="example" class="table table-bordered table-hover nowrap" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>0,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,750</td>
</tr>
</tbody>
</table>
我正在使用 jQuery DataTables. I added Export to Excel button。单击时,将出现提示并要求您输入文件名。
filename: function () {
var txt = prompt("Enter the filename :");
return txt; }
它工作正常,但我想使用 SweetAlert input,因为它在视觉上看起来更好。 问题是出现了提示,但在用户键入文件名之前文件已导出。
swal("Enter the filename :", {
content: "input",
})
.then((value) => {
return value;
});
我在输入文件名后直接返回输入值。请问我的代码中缺少什么建议?非常感谢。
$(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;
});
}
}]
} );
} );
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.bootstrap4.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<table id="example" class="table table-bordered table-hover nowrap" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>0,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,750</td>
</tr>
</tbody>
</table>
一个简单的解决方法是向按钮添加 mousedown 事件。
$(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');
}
}]
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.bootstrap4.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<table id="example" class="table table-bordered table-hover nowrap" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>0,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,750</td>
</tr>
</tbody>
</table>