DataTables 模版
时间: 2023-09-15 07:17:26 浏览: 59
DataTables 是一个 jQuery 插件,可以将一个普通的 HTML 表格转化为具有排序、分页、搜索等功能的交互式表格。下面是一个简单的 DataTables 模板,你可以根据自己的需求进行修改和扩展:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataTables Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.21/datatables.min.css"/>
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Mike Johnson</td>
<td>40</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.21/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
```
这个模板中使用了 jQuery 和 DataTables 的 CDN,你可以将它们替换为本地文件。表格中的数据只是一个简单的示例,你可以将其替换为自己的数据。在 JavaScript 部分,我们使用了 DataTables 的初始化函数来将表格转化为 DataTables 表格,这个函数可以接收一些参数,用于配置表格的各种功能。你可以查看 DataTables 的官方文档来了解更多配置选项。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)