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表格的使用
基础教程推荐
- CSS background image设置:如何为网站增添一份独特美感 2023-10-08
- Spring Boot 系列:Vue+Sping Boot +WebSocket实现前后端消息推送 2023-10-08
- 纯html+css实现奥运五环的示例代码 2022-09-21
- vue项目优化 2023-10-08
- Ajax的原生实现关于MIME类型的使用方法 2023-02-15
- Vue---一条命令自动生成模板 2023-10-08
- Ajax验证用户的唯一性 2022-12-28
- js直接编辑当前cookie的脚本 2023-12-01
- Vue3停止支持IE的几点原因 2023-10-08
- html中两种获取标签内的值的方法 2022-09-21