html页面获取分页查询数据的js和html代码
时间: 2023-06-13 09:02:22 浏览: 74
以下是一个基本的分页查询数据的 HTML 和 JavaScript 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Pagination Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<!-- Data will be loaded here -->
</tbody>
</table>
<div id="pagination"></div>
<script>
$(document).ready(function(){
var table = $('#myTable').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "get_data.php", // URL to server-side data source
"type": "POST"
},
"columns": [
{"data": "name"},
{"data": "age"},
{"data": "city"}
]
});
// Add pagination
table.on('draw', function(){
var pageInfo = table.page.info();
var currentPage = pageInfo.page + 1;
var totalPages = pageInfo.pages;
var pagination = '';
if(currentPage != 1){
pagination += '<button onclick="table.page(' + (currentPage - 2) + ').draw(false)">Prev</button>';
}
if(currentPage != totalPages){
pagination += '<button onclick="table.page(' + currentPage + ').draw(false)">Next</button>';
}
$('#pagination').html(pagination);
});
});
</script>
</body>
</html>
```
在上面的示例中,我们使用 DataTables 插件来获取和显示数据,并使用一个 PHP 脚本(`get_data.php`)作为服务器端数据源。我们还添加了一个简单的分页功能,当用户点击“Prev”或“Next”按钮时,它会更新表格并显示正确的数据页面。
请注意,这只是一个基本示例,你需要根据自己的数据和需求进行修改和定制。
相关推荐
![](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)
![](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)