在 HTML 中设置表格排序功能,可以使用 JavaScript 库,如 DataTables、Tablesorter 等。这些库可以帮助我们轻松地将表格转换为可排序、可搜索和可过滤的数据表。
使用 DataTables 库,需要在 HTML 中引入相应的 JS 和 CSS 文件,并对表格进行初始化设置,如下所示:
<!-- 引入 DataTables 相关文件 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<!-- 初始化表格 -->
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
<!-- 表格代码 -->
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>男</td>
</tr>
</tbody>
</table>
其中,myTable
是表格的 ID,DataTable()
是 DataTables 库的初始化方法。默认情况下,表格的第一行会被视为表头,可以通过点击表头来实现升序、降序排序。
除了 DataTables,Tablesorter 也是一个常用的表格排序库。使用方法类似,需要在 HTML 中引入相应的 JS 和 CSS 文件,并对表格进行初始化设置。