Bootstrap 是一个流行的前端框架，可以帮助快速构建美观、响应式的网页。Bootstrap Table 是 Bootstrap 框架中的一个插件，可以方便地创建表格。在本文中，我们将学习如何使用 Bootstrap Table 创建和定制表格。
安装 Bootstrap Table
首先，我们需要下载并引入 Bootstrap 和 Bootstrap Table 的 CSS 和 JavaScript 文件。可以在官网上找到最新版本的下载链接，也可以使用 CDN 加载文件。
-- -------------------- ---- ------- ---- -- --------- -- --- ----- ---------------- ------------------------------------------------------------------------------- ---- -- --------- ----- -- --- ----- ---------------- ---------------------------------------------------------------------------------------- ---- -- ------ - --------- ---------- --- ------- ---------------------------------------------------------------- ------- -------------------------------------------------------------------------------------------- ---- -- --------- ----- ---------- --- ------- -----------------------------------------------------------------------------------------------
创建表格
接下来，让我们来创建一个简单的表格。在 HTML 中添加一个 <table> 元素，并设置 data-toggle="table" 属性。
-- -------------------- ---- -------
------ --------------------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
--------
--------这样就可以创建一个最基本的表格了。但是，如果我们想要添加一些特性，如排序、分页等，则需要在 JavaScript 中进行设置。
定制表格
排序
Bootstrap Table 支持对表格数据进行排序。首先，需要设置每个表头单元格的 data-sortable="true" 属性。
<thead>
<tr>
<th data-sortable="true">姓名</th>
<th data-sortable="true">年龄</th>
<th data-sortable="true">性别</th>
</tr>
</thead>然后，在 JavaScript 中调用以下代码启用排序功能：
$('table').bootstrapTable({
sortName: 'age', // 默认按年龄排序
sortOrder: 'asc' // 升序排列
});分页
Bootstrap Table 还支持对表格数据进行分页。首先，需要添加一个 <div> 元素作为容器，并设置 data-pagination="true" 属性。
<div>
<table data-toggle="table" data-pagination="true">
<!-- 表格内容 -->
</table>
</div>然后，在 JavaScript 中调用以下代码启用分页功能：
$('table').bootstrapTable({
pagination: true,
pageSize: 10, // 每页显示10条数据
pageList: [10, 20, 50], // 可选的每页数据量
});搜索
Bootstrap Table 还支持对表格数据进行搜索。首先，需要添加一个 <input> 元素作为搜索框。
<div>
<input type="text" class="form-control" id="search-input" placeholder="搜索">
<table data-toggle="table" data-search="true" data-search-selector="#search-input">
<!-- 表格内容 -->
</table>
</div>然后，在 JavaScript 中调用以下代码启用搜索功能：
$('table').bootstrapTable({
search: true,
});示例代码
综合以上特性，我们可以得到如下完整的代码示例：
<!DOCTYPE html> <html lang="en"> <head > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/2091) ，转载请注明来源 [https://www.javascriptcn.com/post/2091](https://www.javascriptcn.com/post/2091)