随着前端技术的不断发展，界面呈现的需求越来越高。在这样的背景下，数据表格的展示显得越来越特别重要。然而，一个优秀的表格展示，既需要考虑可读性，更要考虑用户的便捷操作。 Datatables 是一个 JQuery 的插件库，可以将 HTML table 转化为具有搜索功能、排序功能、分页功能、过滤等等的功能完备的表格。而 datatables.net-buttons-bs4 是 datatables 的另一个插件，它适配了 bootstrap 模板，并提供了多样化的交互式功能。本文将详细介绍使用 npm 包 datatables.net-buttons-bs4 的基本用法。
安装与导入
首先，我们需要先使用 npm 安装 datatables.net-buttons-bs4 ，打开控制台执行如下命令：
npm install datatables.net-buttons-bs4 --save-dev
安装完成后，在需要使用的 .js 文件中，通过 require() 将它引进来：
require('datatables.net-buttons-bs4');使用
使用 datatables.net-buttons-bs4，我们需要基于 datatables 进行配置。请先查阅 datatables 官网中对于它的基础使用。例：
$('#example').dataTable();实现基础的数据表格。下一步，我们将添加 datatables.net-buttons-bs4 的配置及部分效果。
示例代码
$('#example').DataTable({
"dom": 'Bfrtip',
"buttons": [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});最终展示效果如下图所示：
详述
以上代码演示的是一个非常基础的示例，其中重点介绍了 dom 和 buttons 两个关键配置项。我们可以依次对它们进行解释。
dom
"dom": 'Bfrtip'
dom 需要配置的字符串是由字母组成，表明了我们 datatables 的布局。我们将其分成以下几个字母：
- B: 按钮（Button）
- f: 搜索栏（Filtering input）
- r: 可排列性（processing display element）
- t: 表格本体（The table）
- i: 表格信息（Showing x to y of z entries）
- p: 翻页组件（Pagination control）
- l: 长度切换（Length changing input）
- T: 表头（Thead element）
- i: 表脚（Tfoot element）
上述所有字母选项都是可选的，由用户自己确定。值得注意的是，多个字母可以一起使用。此函数同时允许自定义 CSS 类，我们在此不再赘述。
buttons
"buttons": [ 'copy', 'csv', 'excel', 'pdf', 'print' ]
这里，我们对 buttons 进行配置。通过在数组中加入对应的按钮名字，即可实现想要的功能。此处我依次加入了数据表格的复制、导出 csv 文件、导出 excel 文件、导出 pdf 文件以及打印功能。
除此之外，针对每一个按钮，我们还可以自行配置相应的参数，包括导出 pdf 文件的纸张大小等。同时，我们还可以调用自定义按钮。值得注意的是，当然，我们也可以自定义点击事件或 href 链接等属性。
应用场景
datatables.net-buttons-bs4 这个插件，非常适用于那些希望页面提供多样化、互不干扰的导出数据功能的需求。例如，在数据统计页面，管理员希望查阅到拉取各个类别数据的 csv 文件、便于管理员做后续处理，又希望对于目前的数据界面进行快速打印。在这些情况中， datatables.net-buttons-bs4 都能够胜任。
同时，值得注意的是， datatables.net-buttons-bs4 也不会影响用户体验。在默认设置下，这些按钮均会被对应地配置到一个默认布局的位置中去，因此，用户不会感到太过烦扰。
结语
本文总结了使用 datatables.net-buttons-bs4 的 npm 包的基本用法，并通过基础的示例展示它的应用场景和效果。在持续探索的过程中，它为我们提供了便捷的操作，同时也会带来更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162854