实现思路
1.将原有的导出按钮隐藏
2.自己写一个导出文件的按钮
3.监控按钮被点击状况,然后触发下载
实现过程
1.自定义一个导出按钮,并定义位置和样式
2.在Datatable 初始化时增加 initComplete 参数
dom: 'Blfrtip', // 动态控制显示列按钮
buttons: [{
extend: 'excelHtml5',
text:'导出Excel',
title:'测试结果'+{{ task_object.task_id }},
<!-- className: 'btn btn-primary', //按钮的class样式 -->
customize: function( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('## 标题row c[r^="C"]', sheet).attr( 's', '2' );
}
}],
initComplete: function() {
var $buttons = $('.dt-buttons').hide();
$('#export').on('click', function() {
var btnClass = ".buttons-excel";
if (btnClass) $buttons.find(btnClass).click();
})
}
效果图
多个按钮
buttons: [ // 定义各按钮
{
extend: "copy",
text: '复制',
className: "btn-sm"
},
{
extend: "csv",
text: '导出',
className: "btn-sm"
},
{
extend: "print",
text: '打印',
className: "btn-sm"
},
{
text: '重新获取',
action: function ( e, dt, node, config ) {
dt.ajax.reload();
},
className: "btn-sm"
},
],
注意事项
dom: “Blfrtip”, // 定义按钮的位置
“Bfrtip”属性的位置会覆盖表格左上角的lengthMenu,而 "Blfrtip"不会。
DataTable中dom参数详解见:
https://blog.csdn.net/xxtz0522/article/details/83790495