通过Ajax异步请求从后端获取数据,循环响应到html页面中的dataTable表格的tbody中,进行展示数据。仅提供html页面代码
时间: 2024-02-21 11:02:05 浏览: 37
好的,以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>展示数据</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
</head>
<body>
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</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() {
// 使用DataTable插件初始化表格
$('#data-table').DataTable();
// 使用Ajax异步请求数据
$.ajax({
url: 'get-data.php', // 后端接口地址
dataType: 'json',
success: function(data) {
// 循环将数据添加到表格中
for (var i = 0; i < data.length; i++) {
var row = '<tr>' +
'<td>' + data[i].id + '</td>' +
'<td>' + data[i].name + '</td>' +
'<td>' + data[i].age + '</td>' +
'</tr>';
$('#data-table tbody').append(row);
}
// 刷新表格数据
$('#data-table').DataTable().draw();
}
});
});
</script>
</body>
</html>
```
上述代码中,首先引入了jQuery和DataTables插件的相关文件,然后在页面加载完成后,使用DataTable插件初始化了一个表格。接着,通过Ajax异步请求后端接口,获取到数据后,循环将数据添加到表格的tbody中。最后,调用DataTable插件的draw()方法,刷新表格数据。