JS表格组件神器bootstrap table详解（基础版）

什么是Bootstrap Table

Bootstrap Table是一个功能强大的jQuery表格插件，可以快速地在Web应用程序中添加数据表格。它集成了许多常见的功能和选项，包括数据排序、分页、过滤、列对齐、自适应和可定制的模板等等。Bootstrap Table还支持多个数据源，可以通过JSON格式的数据、本地或远程数据支持多种数据类型的表格展示。它很容易上手，可以通过简单的HTML标记来创建表格。

如何使用Bootstrap Table

步骤一：添加Bootstrap和jQuery到你的HTML文件中

为了使用Bootstrap Table，你需要先添加Bootstrap和jQuery到你的HTML文件中。这可以通过CDN或本地文件的方式完成，比如：

<!-- 添加Bootstrap样式表 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 添加jQuery核心库 -->
<script src="https://cdn.staticfile.org/jquery/3.5.0/jquery.min.js"></script>
<!-- 添加Bootstrap Table的CSS和JS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.16.0/bootstrap-table.min.css">
<script src="https://cdn.staticfile.org/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>

步骤二：创建包含表格数据的HTML表格

接下来，你需要创建一个包含表格数据的HTML表格。可以使用简单的HTML表格标签（如<table>、<thead>、<tbody>和<tr>）来创建表格，比如：

<table id="myTable" data-toggle="table">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Name</th>
      <th data-field="price">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Item 1</td>
      <td>$1.99</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Item 2</td>
      <td>$2.99</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Item 3</td>
      <td>$3.99</td>
    </tr>
  </tbody>
</table>

步骤三：使用Bootstrap Table初始化表格

初始化Bootstrap Table非常简单，只需要在表格上面添加data-toggle="table"属性，并在JavaScript中调用如下代码：

$('#myTable').bootstrapTable();

这将自动根据HTML表格中的内容和data-field属性创建Bootstrap Table。此时你就可以看到一个简单的表格展示在你的页面上了。

常用功能和选项

Bootstrap Table集成了多种常用的功能和选项，可以通过在表格头部添加相应的标记和属性来实现。下面是常用的一些示例：

排序

为了启用Chrome Table的排序功能，需要设置data-sortable="true"属性。下面是一个示例：

<table id="myTable" data-toggle="table">
  <thead>
    <tr>
      <th data-field="id" data-sortable="true">ID</th>
      <th data-field="name" data-sortable="true">Name</th>
      <th data-field="price" data-sortable="true">Price</th>
    </tr>
  </thead>
  ...
</table>

分页

为了启用分页功能，需要设置data-pagination="true"属性。下面是一个示例：

<table id="myTable" data-toggle="table" data-pagination="true" data-page-size="5">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Name</th>
      <th data-field="price">Price</th>
    </tr>
  </thead>
  ...
</table>

搜索

为了启用搜索功能，需要设置data-search="true"属性。下面是一个示例：

<table id="myTable" data-toggle="table" data-search="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Name</th>
      <th data-field="price">Price</th>
    </tr>
  </thead>
  ...
</table>

列对齐

为了设置列的对齐方式，可以在表格头部添加data-align属性，可以设置值为left、center、right。下面是一个示例：

<table id="myTable" data-toggle="table">
  <thead>
    <tr>
      <th data-field="id" data-align="center">ID</th>
      <th data-field="name" data-align="left">Name</th>
      <th data-field="price" data-align="right">Price</th>
    </tr>
  </thead>
  ...
</table>

总结

Bootstrap Table提供了众多强大的功能和选项，让你可以快速创建出富有交互性的数据表格。通过上面的示例，相信你可以快速掌握如何使用Bootstrap Table来优雅地展示数据。