用js初始bootstrap的表格
时间: 2024-06-12 22:05:37 浏览: 10
以下是使用JavaScript初始化Bootstrap表格的示例:
HTML代码:
```html
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
<td>北京市朝阳区</td>
<td>13888888888</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
<td>上海市浦东新区</td>
<td>13999999999</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>男</td>
<td>广州市天河区</td>
<td>13777777777</td>
</tr>
</tbody>
</table>
```
JavaScript代码:
```javascript
$(document).ready(function() {
$('#example').DataTable();
});
```
在这个例子中,我们使用了jQuery库和DataTables插件来初始化Bootstrap表格。我们在文档准备好后使用jQuery的ready()方法来初始化表格。我们使用了DataTable()方法来初始化表格,这个方法是由DataTables插件提供的。通过初始化表格,我们可以使表格具有一些额外的功能,如排序、搜索、分页等。
相关推荐
![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_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)
![](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)