html、js实现简单的分页功能
- 逻辑
- 效果
- 部分代码
逻辑
简单的逻辑实现:初始的curPage是1、通过登录界面将curPage传入到list.html的QueryString中
在后端的逻辑处理是:
后端通过获取到的curPage、来进行分页查询
获取前端传来的参数curPage、每次只查询七个结果、如果在前端点击下一页的话、那么curPage + 1 、也就是下一次开始的位置是上一次查询的结束的位置。
效果
在第一页点击上一页:
点击下一页之后:
再次点击上一页:
就又回到刚才的页面了:
部分代码
//从queryString中获取参数:
var curPage = parseInt(location.search.split("=")[1]);
//curPage的改变
function turnP(obj) {
if(obj===1){
//下一页
window.location.href = "list.html?curPage="+(curPage+1);
}else {
//上一页
if(curPage===1){
alert("已经是首页了~~");
}else {
window.location.href = "list.html?curPage="+(curPage-1);
}
}
}
//上下页的按键
<a class="button" onclick="turnP(2)">上一页</a>
<a class="button" onclick="turnP(1)">下一页</a>
更多推荐
html、js实现分页展示的功能
发布评论