dataTables——用图标替换buttons的原始样式

最新推荐文章于 2021-12-16 15:42:24 发布

冧_恣

最新推荐文章于 2021-12-16 15:42:24 发布

阅读量747

点赞数 1

分类专栏：前端文章标签： css3 javascript html

本文链接：https://blog.csdn.net/weixin_43235307/article/details/121787364

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

原始button样式：

1、js代码

$(document).ready(function () {
        var table = $('#carousel_figure_table').DataTable({
        buttons: ['copy', 'excel', 'pdf', 'print'],
        language:'data.json',
        iDisplayLength : 10,// 每页显示行数
        dom:'Bftip'
    }); 
});

2、原始样式

现在想将button的文字改为图标样式

1、更改buttons

buttons: [
   {
		text: '<i class="bx bx-copy" title="复制"></i>',
		extend: 'copy'
	}, {
		text: '<i class="bx bx-printer" title="打印"></i>',
		extend: 'print'
	}, {
		text: '<i class="bx bx-file-blank" title="导出excel"></i>',
		extend: 'excel'
	}, {
		text: '<i class="bx bxs-download" title="生成pdf"></i>',
		extend: 'pdf'
	}
]

$(document).ready(function () {
	var table = $('#carousel_figure_table').DataTable({
		buttons: [
		   {
				text: '<i class="bx bx-copy" title="复制"></i>',
				extend: 'copy'
			}, {
				text: '<i class="bx bx-printer" title="打印"></i>',
				extend: 'print'
			}, {
				text: '<i class="bx bx-file-blank" title="导出excel"></i>',
				extend: 'excel'
			}, {
				text: '<i class="bx bxs-download" title="生成pdf"></i>',
				extend: 'pdf'
			}
		],
		language:'data.json',
		iDisplayLength : 10,// 每页显示行数
		dom:'Bftip'
    }); 
});

2、更改后按钮样式