Bootstrap-table1 是一个基于 Bootstrap 的 jQuery 表格插件，它可以让你快速地创建漂亮、响应式的表格。本文将介绍如何使用 npm 包安装该插件，并在你的网页上快速地实现表格功能。
安装
首先，在命令行中输入以下命令来安装 bootstrap-table1：
npm i bootstrap-table1
这样就会将 bootstrap-table1 下载到你的项目中，并添加到 node_modules 目录下。
接下来，在你的 HTML 文件中添加如下代码：
<link rel="stylesheet" href="node_modules/bootstrap-table/dist/bootstrap-table.min.css"> <script src="node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>
使用方法
基本用法
在 HTML 文件中添加一个 table 元素，给它指定一个 id，然后在 JavaScript 文件中调用以下代码即可：
-- -------------------- ---- -------
---------- -- -
----------------------------
----- --
--- --
----- -------
---- --
-- -
--- --
----- -------
---- --
--
---
---这里使用了 jQuery，必须保证在调用 bootstrapTable() 之前引入了 jQuery 库文件。以上代码是将表格数据直接硬编码到了代码中。
如果你需要从服务器获取数据进行表格渲染，可以使用以下代码：
-- -------------------- ---- -------
---------- -- -
----------------------------
---- ------------
------- ------
--------- -------
----------- -----
--------- ---
--------- ---- --- --- ----
---
---这里先设置了表格数据从 /get_data 进行获取，然后设置了分页功能，每页显示 10 条数据，并给用户提供了每页显示 10、25、50、100 条数据的列表选项。
高级用法
Bootstrap-table1 提供了大量的 API 和配置选项，可以让你自定义表格的样式和功能。
比如，可以通过以下代码为表格添加工具栏：
-- -------------------- ---- -------
---------- -- -
----------------------------
----- --
--- --
----- -------
---- --
-- -
--- --
----- -------
---- --
---
-------- ----------
---
--- ----- - -
----- ---------------
-------- ------------ ------------- ---------- ---------------
------ ---------------- --------------- -------------------------- ----
------------
-------- --------------- ------------- ---------- ---------------
------ ---------------- ---------------- -------------------------- ----
------------
--------
-----------
------------------------------------
---------------------------- -- -
-- ----
---
------------------------------- -- -
-- ----
---
---这里通过在 HTML 文件中创建一个工具栏，并为工具栏中的两个按钮添加点击事件来实现了添加和删除记录的功能。
其它的一些高级用法，如待编辑表格、排序、搜索、多选等，均可以通过 API 和配置选项进行实现，这里就不再赘述。
总结
Bootstrap-table1 是一款非常好用的表格插件，支持大量的配置选项和 API，可以非常方便地实现表格的常见功能。在使用时，需要注意引入相应的依赖库，并根据需求适当地配置表格的样式和功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c82ccdc64669dde4dae