浅析Bootstrap表格的使用

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

浅析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类,并初始化了插件。插件会自动将表格分成多页,并在表格下方显示页码和分页按钮。

本文标题为:浅析Bootstrap表格的使用

基础教程推荐