bootstrap插件 DataTable 的简单使用
时间: 2023-08-05 18:03:37 浏览: 111
要使用 Bootstrap 插件 DataTable,首先需要在 HTML 文件中引入相关的 CSS 和 JS 文件。可以在 Bootstrap 的官网上下载最新版的 DataTable,也可以通过 CDN 引入。
```html
<!-- 引入 DataTable 的 CSS 文件 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
<!-- 引入 jQuery 和 DataTable 的 JS 文件 -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<!-- DataTable 的 HTML 代码 -->
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<!-- 更多数据 -->
</tbody>
</table>
```
然后在 JavaScript 中,使用以下代码初始化 DataTable:
```javascript
$(document).ready(function() {
$('#example').DataTable();
} );
```
这样就可以将表格转换为 DataTable,添加搜索、排序、分页等功能。需要注意的是,表格必须使用 `id` 属性,并且在 JavaScript 中使用该 `id` 来初始化 DataTable。如果你想自定义 DataTable 的配置,可以在初始化时传入一个配置对象,例如:
```javascript
$(document).ready(function() {
$('#example').DataTable({
"paging": true,
"ordering": true,
"info": true
});
});
```
这里只是简单地介绍了 DataTable 的使用方法,更多高级功能可以参考官方文档。