jQuery表格插件datatables用法总结
什么是datatables
datatables是一款基于jQuery库的表格插件，它通过客户端无刷新式展示表格数据，并提供了搜索、分页、排序等功能，能够大大简化web应用程序的开发过程。
如何使用datatables
数据源准备
datatables可以直接使用HTML表格中的数据作为数据源，也可以通过AJAX请求后端API获取JSON数据，需要注意的是，数据最好是按照规范的格式进行返回，包括数组对象等。
// 返回的JSON数据格式类似于如下结构
{
"data": [
{
"field1": "value1",
"field2": "value2",
...
},
{
"field1": "value3",
"field2": "value4",
...
}
]
}
加载datatables
在HTML页面中引入jQuery库和datatables库，然后通过以下代码加载datatables：
$(document).ready(function() {
$('#example').DataTable( {
// 数据源配置，可以是HTML表格或者API URL
ajax: "data.json",
columns: [
// 列定义，对应数据源中的属性
{ data: "name" },
{ data: "position" },
{ data: "office" },
{ data: "age" },
{ data: "start_date" },
{ data: "salary" }
]
} );
} );
这里#example是HTML表格的ID，通过使用DataTable方法可以将其转换为datatables表格。
datatables的常用功能
- 搜索：可以在表格上方提供输入框供用户输入搜索关键字，支持普通文本、正则表达式等各种方式进行搜索。
- 分页：可以将表格数据按照固定行数进行分页展示，并提供上一页、下一页等导航功能。
- 排序：可以点击表头进行升序、降序排列，默认支持数字、日期、字符串三种类型的排序。
- 导出：可以将表格数据导出为CSV、PDF等多种格式，方便数据备份和二次处理。
- 行编辑：可以让用户直接在表格中进行编辑，并通过AJAX请求提交数据进行保存。
实例应用
示例1：从HTML表格加载datatables
<!DOCTYPE html>
<html>
<head>
<title>Hello, datatables</title>
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<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>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<!-- 中间省略部分数据 -->
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>
示例2：通过API获取JSON数据并展示为datatables
<!DOCTYPE html>
<html>
<head>
<title>Hello, datatables</title>
<link href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<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></tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data.json",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
</script>
</body>
</html>
这里的data.json是API URL，返回格式应当是上面提到的规范格式，可以通过后端程序进行生成。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery表格插件datatables用法总结 - Python技术站
微信扫一扫 
支付宝扫一扫 