浅析Bootstrap表格的使用

Bootstrap是一个流行的前端框架，提供了丰富的组件和样式。表格是一个必不可少的组件，本文将深入浅出地介绍Bootstrap表格的使用，包括如何创建基本表格、添加样式、排序、过滤和分页等。

创建基本表格

在Bootstrap中，我们可以使用<table>元素来创建表格。以下是一个最基本的表格结构：

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

在上面的示例中，我们使用<thead>来定义表格头部，<tbody>来定义表格主体，<tr>来定义表格行，<th>来定义表格头单元格，<td>来定义表格数据单元格。

添加样式

Bootstrap提供了一些CSS类，可以为表格添加样式。以下是一些常用的类：

• table：基本表格样式
• table-striped：斑马纹表格样式
• table-bordered：带边框的表格样式
• table-hover：鼠标悬停时变色的表格样式
• table-responsive：响应式表格样式，自适应不同尺寸设备的屏幕

例如，我们可以为表格添加斑马纹样式和带边框样式：

<table class="table table-striped table-bordered">
  ...
</table>

排序和过滤

Bootstrap表格还提供了一个插件，可以实现对表格数据的排序和过滤。该插件名为“tablesorter”。在使用之前，我们需要引入相关的CSS和JS文件，例如：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.bootstrap_4.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>

然后，我们需要为表格添加一个类名tablesorter，并在JS中进行初始化，例如：

<script>
$(function() {
  $(".tablesorter").tablesorter();
});
</script>

有了这些准备工作，我们就可以对表格进行排序和过滤了。例如，我们可以为表格添加一个排序按钮：

<table class="table table-striped table-bordered tablesorter">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    ...
  </tbody>
</table>
<button id="sort-btn">Sort</button>
<script>
$(function() {
  $(".tablesorter").tablesorter();
  $("#sort-btn").click(function() {
    $(".tablesorter").trigger("sorton", [[[1,0]]]);
  });
});
</script>

在上面的示例中，我们传递了[[[1,0]]]参数，表示按照第2列数据（下标从0开始）进行排序，升序排列。如果要降序排列，可以将参数设置为[[[1,1]]]。

分页

Bootstrap还提供了一个分页插件，可以将长表格分成多页进行展示。该插件名为“datatable”。在使用之前，我们需要引入相关的CSS和JS文件，例如：

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>

然后，我们需要为表格添加一个类名datatable，并在JS中进行初始化，例如：

<script>
$(function() {
  $(".datatable").DataTable();
});
</script>

有了这些准备工作，我们就可以在表格下方显示页码和分页按钮了。例如：

<table class="table table-striped table-bordered datatable">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    ...
  </tbody>
</table>
<script>
$(function() {
  $(".datatable").DataTable();
});
</script>

示例说明

以下是两个示例，其中一个演示了如何在表格中添加排序和过滤功能，另一个演示了如何使用分页功能。

示例一

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.bootstrap_4.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>

<table class="table table-striped table-bordered tablesorter">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Emma</td>
      <td>25</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>John</td>
      <td>30</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Sarah</td>
      <td>22</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>28</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>
<button id="sort-btn">Sort by age</button>
<script>
$(function() {
  $(".tablesorter").tablesorter();
  $("#sort-btn").click(function() {
    $(".tablesorter").trigger("sorton", [[[1,0]]]);
  });
});
</script>

在上面的示例中，我们为表格添加了tablesorter类，并初始化了插件。然后，我们在JS中为一个按钮添加了点击事件，当点击按钮时，按照年龄排序。

示例二

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>

<table class="table table-striped table-bordered datatable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Emma</td>
      <td>25</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>John</td>
      <td>30</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Sarah</td>
      <td>22</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>28</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>27</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>32</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Lisa</td>
      <td>23</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>David</td>
      <td>29</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Lucy</td>
      <td>26</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Bill</td>
      <td>33</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>
<script>
$(function() {
  $(".datatable").DataTable();
});
</script>

在上面的示例中，我们为表格添加了datatable类，并初始化了插件。插件会自动将表格分成多页，并在表格下方显示页码和分页按钮。