Bootstrap Table 完整教程
目录
- 引言：什么是 Bootstrap Table？
- 快速上手：第一个 Bootstrap Table
- 核心概念：数据是如何加载的？
- 1 HTML 初始化
- 2 JavaScript 初始化
- 3 数据源类型
- 常用功能详解
- 1 列操作
- 2 分页
- 3 排序
- 4 搜索
- 5 工具栏
- 6 卡片视图
- 7 行样式与事件
- 高级用法
- 1 服务端分页、排序与搜索
- 2 自定义模板
- 3 行内编辑
- 最佳实践与性能优化
- 完整示例代码
- 总结与资源
引言：什么是 Bootstrap Table？
Bootstrap Table 是一个基于 Bootstrap 框架的、功能强大的 jQuery 表格插件，它旨在为 Web 开发者提供一种简单、快速的方式来创建具有丰富交互功能的数据表格，而无需编写大量的 JavaScript 代码。
（图片来源网络，侵删）
主要特点：
- 开箱即用：只需少量配置，就能实现分页、排序、搜索、卡片视图等复杂功能。
- 与 Bootstrap 无缝集成：完美支持 Bootstrap 3 和 Bootstrap 5 的主题和样式。
- 功能丰富：支持行选择、列冻结、数据格式化、事件处理、本地化等多种高级特性。
- 易于扩展：提供了丰富的 API 和事件,方便开发者进行二次开发和定制。
快速上手：第一个 Bootstrap Table
让我们创建一个最简单的表格，体验一下 Bootstrap Table 的魅力。
步骤 1：引入必要的文件
你需要引入 jQuery、Bootstrap 的 CSS 和 JS，以及 Bootstrap Table 的 CSS 和 JS。
（图片来源网络，侵删）
<!-- 1. 引入 Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <!-- 2. 引入 jQuery (Bootstrap Table 依赖 jQuery) --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script> <!-- 3. 引入 Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <!-- 4. 引入 Bootstrap Table CSS --> <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.3/dist/bootstrap-table.min.css"> <!-- 5. 引入 Bootstrap Table JS --> <script src="https://unpkg.com/bootstrap-table@1.22.3/dist/bootstrap-table.min.js"></script>
步骤 2：创建 HTML 结构
在 <body> 中创建一个 <table> 元素，并给它一个 id。
<table id="myTable"></table>
步骤 3：初始化表格
在 <script> 标签中，使用 JavaScript 来初始化这个表格。
（图片来源网络，侵删）
<script>
$(function () {
$('#myTable').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '名称'
}, {
field: 'price',
title: '价格'
}],
data: [
{
id: 1,
name: '商品 A',
price: 99.9
},
{
id: 2,
name: '商品 B',
price: 199.9
},
{
id: 3,
name: '商品 C',
price: 299.9
}
]
});
});
</script>
完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap Table 快速上手</title>
<!-- 1. 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<!-- 4. 引入 Bootstrap Table CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.3/dist/bootstrap-table.min.css">
</head>
<body>
<div class="container mt-5">
<h1>我的第一个 Bootstrap Table</h1>
<table id="myTable"></table>
</div>
<!-- 2. 引入 jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<!-- 3. 引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- 5. 引入 Bootstrap Table JS -->
<script src="https://unpkg.com/bootstrap-table@1.22.3/dist/bootstrap-table.min.js"></script>
<script>
$(function () {
$('#myTable').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '商品名称'
}, {
field: 'price',
title: '价格'
}],
data: [
{ id: 1, name: 'MacBook Pro', price: 12999 },
{ id: 2, name: 'iPhone 15', price: 5999 },
{ id: 3, name: 'iPad Air', price: 4399 },
{ id: 4, name: 'AirPods Pro', price: 1999 }
]
});
});
</script>
</body>
</html>
一个带有数据的表格就生成了，你可以直接在浏览器中打开这个 HTML 文件，你会看到一个美观的 Bootstrap 表格。
核心概念：数据是如何加载的？
Bootstrap Table 的数据加载方式非常灵活，主要分为两大类：客户端加载和服务端加载。
1 HTML 初始化
你也可以直接在 HTML 中定义表格的结构，Bootstrap Table 会自动解析。
<table id="table-from-html"
data-toggle="table"
data-url="json/data.json"
data-pagination="true"
data-search="true">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">名称</th>
<th data-field="price">价格</th>
</tr>
</thead>
</table>
data-toggle="table"：告诉 Bootstrap 这是一个表格。data-url="..."：指定一个 JSON 数据源 URL。data-pagination="true"：开启分页。data-field="..."与数据对象的属性对应起来。
这种方式非常直观,适合简单的配置。
2 JavaScript 初始化
如“快速上手”中所示，通过 JavaScript 对象来配置表格，这种方式更灵活,适合复杂的动态配置。
3 数据源类型
Bootstrap Table 可以接受多种类型的数据源：
- Array (数组)：最常见的方式，直接传入一个 JavaScript 对象数组。
- URL (链接)：指向一个返回 JSON 数据的 API 接口，这是实现服务端分页/排序/搜索的基础。
- AJAX 选项：通过
ajax选项，你可以完全控制 AJAX 请求，例如添加自定义的请求头、参数等。
常用功能详解
Bootstrap Table 的强大之处在于其丰富的配置选项，这些选项通常作为 bootstrapTable() 方法的参数传入。
1 列操作
通过 columns 数组来定义每一列。
$('#table').bootstrapTable({
columns: [
// 选择列
{
checkbox: true,
field: 'state',
align: 'center'
},
// 序号列
{
title: '序号',
formatter: function (value, row, index) {
return index + 1;
}
},
// 普通列
{
field: 'name',
title: '名称',
sortable: true // 开启排序
},
// 操作列
{
title: 
