简单易用的分页插件 原生HTML分页功能 JS ajax对接后台数据接口的调用
以下是一个使用原生HTML、JavaScript和AJAX实现的简单分页插件的示例代码。这个示例假设你已经有了一个后端API，它能够处理分页数据的请求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页示例</title>
<script>
function fetchData(page) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('data-container').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'your-backend-api-url?page=' + page, true);
xhr.send();
}
</script>
</head>
<body>
<div id="data-container">
<!-- 这里将显示加载的数据 -->
</div>
<div id="pagination">
<!-- 这里将显示分页控件 -->
</div>
<script>
// 假设后端返回的分页数据格式如下：
// {
// "total_pages": 10,
// "current_page": 1
// // ...其他数据
// }
fetchData(1); // 默认加载第一页数据
</script>
</body>
</html>在这个示例中，fetchData 函数负责使用AJAX向后端发送请求并获取数据。当请求成功返回后，数据将被插入到页面的data-container元素中。分页逻辑需要你的后端支持，并且在前端生成分页控件，通过点击分页控件的页码来调用fetchData函数并传递对应的页码。
请注意，这个示例没有实现实际的分页控件。你需要根据后端返回的分页数据（如总页数和当前页码）来动态生成分页控件，并在用户点击分页控件时调用fetchData函数。
评论已关闭