我创建了一个函数,用户可以通过Bootbox提示输入输入文件名,然后我在我的数据表中调用此函数,以使用用户输入的值设置导出文件的名称。
我的问题是:当我点击“保存当前页面”按钮时,文件会被导出,然后弹出提示。它应该以相反的方式工作。首先出现提示,用户输入文件名,然后使用此名称导出文件。
这是我的代码。我正在result
中将myFunction()
值传递给数据表中的filename
。
$(document).ready(function() {
var t = $('#example').DataTable({
buttons: [{
extend: 'excelHtml5',
title: '',
text: 'Save current page',
filename: function() {
return myFunction();
},
exportOptions: {
modifier: {
page: 'current'
}
},
customize: function(xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c', sheet).attr('s', '0');
$('row:first c', sheet).attr('s', '2');
}
}]
});
t.buttons().container()
.appendTo('#example_wrapper .col-sm-6:eq(0)');
function myFunction() {
bootbox.prompt("Enter the filename",
function(result) {
return result;
});
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap.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.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<table id="example" class="table table-striped table-bordered" cellspacing="0" 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>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
</table>
当我用示例javascript提示替换Bootbox输入框时,它工作正常,我的文件以输入的文件名导出。
function myFunction() {
var filename = prompt("Please enter file name:");
return filename; }
有任何建议请问如何将用户输入的值从我的函数传递给我的数据表?谢谢。
答案 0 :(得分:0)
也许将所有内容添加到myFunction()中然后调用函数'onLoad':
function myFunction() {
bootbox.prompt("Enter the filename",
function(result) {return result;} );
var t = $('#example').DataTable({
buttons: [
{
extend: 'excelHtml5',
title: '',
text: 'Save current page',
filename: function () { return myFunction();},
exportOptions: {
modifier: {page: 'current'} },
customize: function(xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c', sheet).attr('s', '0');
$('row:first c', sheet).attr('s', '2');
}
}
]
} );
t.buttons().container()
.appendTo( '#example_wrapper .col-sm-6:eq(0)' );
}
我从来没有搞过这个特定的工具,但我猜测bootbox可能不是'同步'