简介
datatables.net-buttons-bs是datatables.net的一个扩展插件，它提供了一些按钮和样式，可以帮助我们方便地操作表格。本文将介绍如何使用npm包datatables.net-buttons-bs，并提供一些示例代码，帮助大家更好地掌握这个插件。
安装
首先，我们需要安装npm包datatables.net-buttons-bs：
npm install datatables.net-buttons-bs --save
然后，在我们的HTML文件中引入相关css和js文件：
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jq-3.6.0/dt-1.11.2/b-2.0.0/b-colvis-2.0.0/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jq-3.6.0/dt-1.11.2/b-2.0.0/b-colvis-2.0.0/datatables.min.js"></script>
使用
在我们的HTML文件中创建一个表格，并定义相应的列：
-- -------------------- ---- ------- ------ ------------ --------------- ------------------- ------- ---- ----------- ----------- ----------- ----- -------- ------- ---- ----------- ---------- ----------- ----- ---- ----------- ---------- ----------- ----- ---- ----------- ---------- ----------- ----- -------- --------展开代码
接着，在我们的js文件中，初始化datatables并添加相应的按钮：
$(document).ready(function() { $('#example').DataTable( { dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ] } ); });
其中，dom属性表示我们要添加哪些按钮，可以是以下值之一：
- B：Button 按钮
- f：Filter 过滤器
- r：Processing 进度指示器
- i：Information 信息
- p：Pagination 分页
- t：Table 表格
- l：Length 切换每页显示记录数
- D：ColVis 列可见性按钮
上面的代码表示我们要添加复制、csv、excel、pdf、打印按钮。
示例
在下面的示例中，我们将创建一个带有搜索和分页功能的可排序表格，同时还添加了导出按钮。
首先，在我们的HTML文件中创建一个包含搜索、分页和导出按钮的表格：
-- -------------------- ---- ------- ------ ------------ --------------- ------------------- ------- ---- ----------- ----------- ----------- ----- -------- ------- ---- ----------- ---------- ----------- ----- ---- ----------- ---------- ----------- ----- ---- ----------- ---------- ----------- ----- -------- -------- ---- ------------- ------- ------------- ---------- ------------ --------------------------- ------展开代码
然后，在我们的js文件中，初始化datatables并添加相应的设置：
-- -------------------- ---- ------- ---------------------------- - ------------------------ - ---- --------- -------- - ------- ------ -------- ------ -- --------- - -------------- --------- -------------- --- ------ ----- --------------- --------- -------- ---- ------- - ----- ----- ------- --- ------------- ---- - - - ----- - --- ---------------- --- ----- -------- --------------- --- ---------- ------ ------- --- -------------- --------- ------------------ --------- ----------------- ---- ------------ - --------- ----- ------------ ----- -------- ----- -------- ---- -- -------- - ----------------- -- --------- ------------------ -- -------- - -- ------------- ----- --- --- ---- ---- --- --- ------- ------------- --- -------- -- -- ----- -- - -- ---------------------------- ---------- - ----------------------------------------------- - -- ---展开代码
其中，在language属性中，我们定义了表格的语言、搜索框的placeholder等；在lengthMenu属性中，我们定义了要显示的每页行数，以及显示的文本；在pageLength属性中，我们定义了每页显示的行数；在order属性中，我们定义了按年龄列进行升序排序。
至此，我们已经成功地创建了一个可搜索、可分页、可导出的表格。
总结
通过本文的学习，我们了解了如何使用npm包datatables.net-buttons-bs，并通过实际示例代码进行练习。值得注意的是，本文介绍的只是datatables.net-buttons-bs的一个子集，如果大家想要更多的定制和扩展，可以去官网查看更多文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/185712
