制作一个DataTables模版 包含他的所有功能
时间: 2024-02-03 17:12:43 浏览: 97
DataTable样式
首先,需要引入DataTables的CSS和JavaScript文件,可以从官网下载或使用CDN链接:
```html
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
```
接下来,可以创建一个HTML表格,并将其转换为DataTables:
```html
<table id="example" class="display" 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>
<!-- more rows... -->
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
```
这将创建一个具有以下功能的DataTables实例:
- 分页
- 搜索
- 排序
- 每页显示多少行
可以根据需要进行自定义,例如:
```javascript
$(document).ready(function() {
$('#example').DataTable({
"paging": true,
"searching": false,
"ordering": true,
"pageLength": 10,
"lengthMenu": [10, 25, 50, 100],
"columnDefs": [
{ "orderable": false, "targets": [5] }
],
"language": {
"decimal": "",
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "Showing 0 to 0 of 0 entries",
"infoFiltered": "(filtered from _MAX_ total entries)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "Show _MENU_ entries",
"loadingRecords": "Loading...",
"processing": "Processing...",
"search": "Search:",
"zeroRecords": "No matching records found",
"paginate": {
"first": "First",
"last": "Last",
"next": "Next",
"previous": "Previous"
},
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
}
}
});
});
```
这个例子中,我们添加了以下自定义选项:
- 每页显示10行
- 显示10、25、50、100行选择菜单
- 禁用第6列的排序
- 自定义语言(英文)
这只是一些选项的例子,DataTables具有许多其他选项和可扩展性,可以根据需求进行自定义。
阅读全文