bootstraptable 固定指定的列 完整代码
时间: 2023-07-03 20:07:36 浏览: 74
以下是一个示例代码,展示如何使用 Bootstrap Table 来固定指定列:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Table - 固定指定的列</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.css">
</head>
<body>
<div class="container">
<table id="table" data-toggle="table" data-height="400" data-url="data.json" data-pagination="true" data-side-pagination="server">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">姓名</th>
<th data-field="age">年龄</th>
<th data-field="gender">性别</th>
<th data-field="email">邮箱</th>
<th data-field="phone">电话</th>
</tr>
</thead>
</table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.1/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>
<script>
$(function() {
$('#table').bootstrapTable({
fixedColumns: true,
fixedNumber: 1 // 固定第一列
});
});
</script>
</body>
</html>
```
在上面的代码中,我们通过引入 `bootstrap-table-fixed-columns.min.js` 插件来实现固定指定列的功能。在初始化表格时,我们通过设置 `fixedColumns` 为 `true` 来启用固定列的功能,并通过设置 `fixedNumber` 来指定要固定的列数。
在上面的示例代码中,我们指定固定第一列,即 `ID` 列。如果您想要固定其他列,只需要将 `fixedNumber` 的值更改为对应的列数即可。
同时,为了展示效果,我们还引入了 `data.json` 文件作为表格的数据源。您可以根据自己的需求,将数据源替换成自己的数据接口。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)