Bootstrap-table 是一款基于 Bootstrap 的 jQuery 表格插件，提供了丰富的功能，如分页、排序、搜索、多选等，广泛应用于各种 Web 项目中。
如何使用 Bootstrap-table
引入必要的文件
首先，你需要引入 Bootstrap 和 jQuery 的相关文件，然后引入 Bootstrap-table 的 CSS 和 JS 文件。如果需要国际化支持，还需引入相应的语言文件：
html
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<!-- 引入 jQuery -->
<script src="jquery.min.js"></script>
<!-- 引入 Bootstrap JS -->
<script src="bootstrap.min.js"></script>
<!-- 引入 Bootstrap-table CSS -->
<link rel="stylesheet" href="bootstrap-table.css">
<!-- 引入 Bootstrap-table JS -->
<script src="bootstrap-table.js"></script>
<!-- 引入 Bootstrap-table 中文语言文件 -->
<script src="bootstrap-table-zh-CN.js"></script>初始化表格
Bootstrap-table 可以通过 HTML5 的 data-* 属性或 JavaScript 来初始化。
使用 HTML5 的 data-* 属性
html
<table data-toggle="table" data-url="data1.json"><thead><tr><th data-field="id">Item ID</th><th data-field="name">Item Name</th><th data-field="price">Item Price</th></tr></thead>
</table>使用 JavaScript 初始化
html
<table id="table"></table>
<script>$('#table').bootstrapTable({url: 'data1.json', // 请求后台的 URLcolumns: [{field: 'id',title: 'Item ID'}, {field: 'name',title: 'Item Name'}, {field: 'price',title: 'Item Price'}]});
</script>配置选项
Bootstrap-table 提供了丰富的配置选项，以下是一些常用的配置：
url：请求数据的 URL。method：请求方式，如get或post。pagination：是否显示分页。pageSize：每页显示的记录数。pageList：用户可以选择的每页记录数。search：是否显示搜索框。sidePagination：分页方式，可以是client（客户端分页）或server（服务器端分页）。columns：定义表格的列，包括字段名和列标题等。
功能扩展
Bootstrap-table 还支持一些扩展功能，如卡片视图、主从表显示、列合并等。
通过这些功能和配置，Bootstrap-table 可以满足大多数表格展示和操作的需求，提高开发效率和用户体验。
