什么是Bootstrap？
Bootstrap是一个流行的前端框架，为用户提供了大量的HTML、CSS和JavaScript组件和工具，帮助用户快速创建响应式、移动设备优先的界面。使用Bootstrap可以节省开发时间和成本，同时保证网站的可靠性和一致性。
Bootstrap Tables
Bootstrap的Tables是非常有用的组件，可以用来显示表格数据。Bootstrap表格提供了一些内置功能，让用户可以轻松地创建漂亮的、易于使用的表格。
Bootstrap Table基础
要在Bootstrap中创建表格，我们需要一个基于HTML的表格，然后使用CSS和JavaScript将其转换为漂亮的Bootstrap表格。下面的代码展示了如何创建一个简单的表格：
<table class="table">
<thead>
<<tr>>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</<tr>>
</thead>
<tbody>
<<tr>>
<td>小明</td>
<td>18</td>
<td>男</td>
</<tr>>
<<tr>>
<td>小红</td>
<td>17</td>
<td>女</td>
</<tr>>
<<tr>>
<td>小李</td>
<td>20</td>
<td>男</td>
</<tr>>
</tbody>
</table>
在上面的代码中，我们使用HTML标记定义了一个简单的表格，并添加了一些表格头和表格数据行。现在，我们需要将该表格转换为Bootstrap表格。
在Bootstrap中添加样式
Bootstrap提供了一些CSS类来给表格添加样式，例如，table-s<tr>iped、table-bordered、table-hover和table-condensed等。这些样式可帮助用户在表格中添加不同样式的背景、边框、鼠标悬停等效果。下面的代码展示了如何在表格中添加条纹样式：
<table class="table table-striped">
<thead>
<<tr>>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</<tr>>
</thead>
<tbody>
<<tr>>
<td>小明</td>
<td>18</td>
<td>男</td>
</<tr>>
<<tr>>
<td>小红</td>
<td>17</td>
<td>女</td>
</<tr>>
<<tr>>
<td>小李</td>
<td>20</td>
<td>男</td>
</<tr>>
</tbody>
</table>
上面的代码将表格添加了条纹样式，每隔一行就会添加一个灰色背景。
Bootstrap表格事件
Bootstrap提供了一些预定义的表格事件，可以让用户在单元格或行上触发特定的操作，例如单击、双击、鼠标悬停等。在下面的代码中，我们将向表格中添加一个单击事件，当用户单击第一个数据单元格时，将弹出一个窗口显示该单元格的内容。
<table class="table table-striped">
<thead>
<<tr>>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</<tr>>
</thead>
<tbody>
<<tr>>
<td onclick=alert('姓名：'+this[xss_clean])">小明</td>
<td>18</td>
<td>男</td>
</<tr>>
<<tr>>
<td>小红</td>
<td>17</td>
<td>女</td>
</<tr>>
<<tr>>
<td>小李</td>
<td>20</td>
<td>男</td>
</<tr>>
</tbody>
</table>
上面的代码中，我们在第一个数据单元格上添加了一个单击事件，当用户单击该单元格时，将显示一个弹出窗口，其中包含该单元格的内容。
Bootstrap表格过滤和排序
在Bootstrap表格中，用户可以使用内置的搜索和排序功能来快速查找和排序表格数据。通过使用jQuery插件，可以轻松地将这些功能添加到Bootstrap表格中。
对于过滤器，我们可以使用jQuery插件DataTables。DataTables是一种强大的、灵活的jQuery表格插件，它可以从HTML表格中创建交互式数据网格，并支持许多功能，包括排序、搜索、分页和许多其他功能。
在下面的代码中，我们将在表格中启用DataTables插件，并添加搜索框和排序按钮。DataTables插件会自动将这些元素添加到表格中。
Bootstrap表格过滤和排序
<table id="example" class="table table-striped">
<thead>
<<tr>>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</<tr>>
</thead>
<tbody>
<<tr>>
<td>小明</td>
<td>18</td>
<td>男</td>
</<tr>>
<<tr>>
<td>小红</td>
<td>17</td>
<td>女</td>
</<tr>>
<<tr>>
<td>小李</td>
<td>20</td>
<td>男</td>
</<tr>>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.Bootstrap5.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
上面的代码中，我们添加了两个CSS文件和三个JavaScript文件，其中包括jQuery和DataTables。我们还在表格上使用了DataTables插件，并在代码中添加了数据表的初始代码。
现在，我们需要添加搜索框和排序按钮。在DataTables中，可以使用DOM选项来自定义表格控件。使用dom选项，可以轻松地将搜索框和排序按钮添加到表格中。
下面的代码中，我们将DOM选项设置为“Bfrtip”，这将添加搜索框和排序按钮，并将它们放在表格上方，左侧是搜索框，右侧是排序按钮。
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
在上面的代码中，我们还将buttons选项设置为复制、CSV、Excel、PDF和打印按钮，这些按钮会自动添加到表格上方的按钮栏中。
获取Bootstrap表格的行数据
有时，我们需要获取选定行的数据，以便进行其他操作，例如：编辑、删除、添加等。为了获取行数据，我们可以使用以下代码：
$('#example tbody').on('click', '<tr>', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
在上面的代码中，我们将click事件绑定到tbody上的所有行，并在单击时获取行数据。我们使用table.row( this ).data();来获取该行的数据，其中table是我们创建的DataTables插件的实例， this引用选定的行。
然后，我们将该行数据保存在变量data中，并在弹出框中显示该数据。
总结
Bootstrap是一个非常流行的前端框架，可以帮助用户快速创建响应式、移动设备优先的界面。在Bootstrap中，表格是一个非常有用的组件，可以用来显示表格数据。通过使用Bootstrap中内置的样式和事件等功能，可以轻松地创建漂亮、易于使用的表格。此外，还可以使用DataTables插件来添加搜索、排序和过滤等高级功能，以及使用jQuery获取行数据等操作。