Datatable 修改导出Excel按钮的位置

实现思路

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

本文地址：https://blog.csdn.net/qq_39262215/article/details/110225671