引导表密集 - HTML

引导表（Bootstrap table）是一种用于在网页上显示大量数据的主要组件。它是一个基于Javascript的插件，可以让你以较少的代码实现功能强大的表格。此外，Bootstrap table 还提供了各种功能，如排序、搜索、分页和导出。在本文中，我们将讨论如何在HTML中使用Bootstrap table。

获取并使用Bootstrap table

首先，你需要将Bootstrap table插件下载到你的本地计算机中。你可以从它的官方网站或Github中获得。下载完成之后，你需要把该插件的文件解压到你的工程目录下，或者更好的方法是使用CDN链接进行引用。

在使用Bootstrap table之前，你需要导入jQuery库和Bootstrap库，以便它们共同合作。

<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- 引入Bootstrap库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
    integrity="sha384-...==" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-...==" crossorigin="anonymous"></script>

<!-- 引入Bootstrap table的CSS和JS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.18.2/dist/bootstrap-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.18.2/dist/bootstrap-table.min.js"></script>

现在，你已经引入了Bootstrap table所依赖的所有文件。接下来，你需要创建一个HTML表格，然后通过Javascript来控制它。

<!-- 在HTML中创建一个ID为'table'的表格 -->
<table id="table"></table>

<!-- 在Javascript中初始化Bootstrap table -->
<script>
    $(function () {
        // 创建模拟数据
        var data = [
            { "id": 1, "name": "张三", "gender": "男", "age": 25 },
            { "id": 2, "name": "李四", "gender": "男", "age": 28 },
            { "id": 3, "name": "王五", "gender": "女", "age": 23 }
        ];

        // 初始化表格
        $('#table').bootstrapTable({
            data: data, // 提供数据
            columns: [ // 列信息
                { title: 'ID', field: 'id' },
                { title: '姓名', field: 'name' },
                { title: '性别', field: 'gender' },
                { title: '年龄', field: 'age' }
            ]
        });
    });
</script>

现在，你已经成功地使用Bootstrap table来创建了一个表格，并且通过Javascript控制了它的数据和显示。你可以尝试添加一些自己的数据和设定，来自定义你的表格，并享受Bootstrap table带来的便利和功能。

功能和选项

Bootstrap table提供了许多可自定义的选项，以满足不同需求的开发者。以下是一些常见的选项和功能：

数据展示

• data: 用于提供数据的数组，可以是本地数据或远程数据。

$('#table').bootstrapTable({
    data: data, // 提供数据
    ...
});

• pagination: 是否分页，默认为true。可以通过设为false来关闭分页。

$('#table').bootstrapTable({
    pagination: false, // 不分页
    ...
});

• pageSize: 每页显示的记录数，默认为10条。

$('#table').bootstrapTable({
    pageSize: 15, // 每页显示15条记录
    ...
});

排序和过滤

• sortable: 是否启用列排序，默认为false。可以通过设为true来启用排序。

$('#table').bootstrapTable({
    sortable: true, // 允许排序
    ...
});

• filterControl: 是否启用过滤器，默认为false。可以通过设为true来启用过滤器。

$('#table').bootstrapTable({
    filterControl: true, // 允许过滤器
    ...
});

外观和样式

• striped: 是否显示条纹状，即隔行换色。默认为false，可通过设为true来显示条纹。

$('#table').bootstrapTable({
    striped: true, // 显示条纹状
    ...
});

• hover: 是否在行上悬停高亮显示。默认为false，可通过设为true来悬停高亮显示。

$('#table').bootstrapTable({
    hover: true, // 在行上悬停高亮显示
    ...
});

• classes: 自定义CSS类，可以用于自定义表格的样式。

$('#table').bootstrapTable({
    classes: 'my-table', // 添加自定义CSS类'my-table'
    ...
});

国际化

Bootstrap table支持多种语言，可以通过设置locale选项来应用不同的语言。

$('#table').bootstrapTable({
    locale: 'zh-CN', // 使用中文
    ...
});

Bootstrap table还提供了许多其他的选项和功能，如固定表头、事件处理、列格式化等等。如果你想了解更多的内容，可以参考官方文档或者中文文档。