前台页面大体是这样的
默认加载指定页签的第一页数据,
单击顶部页签时,异步请求相应的第一页数据
单击底部页码时,异步请求对应页码的数据
单击前进和后退时,对应请求相关数据和按钮的禁用状态
php部分
<?php
思路:未提交页签则默认异步加载指定的页签第一页数据,客户端提交了页签则异步加载对应的第一页数据,都要向前端页面返回指定页签的id
客户端提交页码时,要同时提交对应也前的id
前端数据处理下边是个简单的例子
//1 页面首次加载时
$.ajax({//页面初次加载时异步请求指定页签的第一页数据
type:'GET',
data:{id:指定页签在数据库中的编号,pageNum:1},
url:'php文件',
success:function (pager) {
pageData(pager);
pageNum(pager);
}
})
//2 分页数据函数 举例如下
function pageData(pager) {
var html="";
$.each(pager.data,function (i,style) {
html+=`
<li>
<img src="${style.pic}">
<h3>
<a href="#">${style.title}</a>
</h3>
</li>
`;
});
$(".style_detail").html(html);
}
//3 分页条函数
function pageNum(pager) {
// 判断总页数是否大于1
if(pager.pageCount<=1){//总页数为1
html=`<a href="" class="disabled"><</a><a href="1" class="active">1</a><a href="" class="disabled">></a>`;
}else{ //总页数大于1
var html=`<a href="" class="disabled"><</a>`;
for(var i=1;i<=pager.pageNum-1;i++){
html+=`<a href="${i}">${i}</a>`;
}
html+=`<a href="${pager.pageNum}" class="active">${pager.pageNum}</a>`;
for(i=pager.pageNum+1;i<=pager.pageCount;i++){
html+=`<a href="${i}">${i}</a>`;
}
html+=`<a href="" class="next">></a>`;
}
$("#page").html(html);
}
//4 底部分页栏异步请求数据
$("#page")
.on("click","a:not(:first,:last)",function (e) { // 中间按钮
e.preventDefault();
if($(this).next().html()==">"){//后一个兄弟是>
$(this).addClass("active").siblings(".active").removeClass("active");
$(this).next().addClass("disabled").siblings(".disabled").removeClass("disabled");
}else if($(this).prev().html()=="<"){//前一个兄弟是<
$(this).addClass("active").siblings(".active").removeClass("active");
$(this).prev().addClass("disabled").siblings(".disabled").removeClass("disabled");
}else if($(this).next().html()==">"&&$(this).prev().html()=="<"){//后一个兄弟是> 前一个兄弟是<
$(this).next().addClass("disabled");
$(this).prev().addClass("disabled");
}else{
$(this).addClass("active").siblings(".active").removeClass("active").siblings(".disabled").removeClass("disabled");
}
var html="";
var n=parseInt($(this).attr("href"));
var id=parseInt($("#style_nav a.hover").attr("href"));
$.ajax({
type:'GET',
url:'data/style.php',
data:{pageNum:n,id:id},
success:function (pager) {
pageData(pager);
}
});
})
.on("click","a:first",function (e) { // < 按钮
e.preventDefault();
var html="";
var id=parseInt($("#style_nav a.hover").attr("href"));
var n=parseInt($('#page a[class="active"]').html());
if(n>=2){
n--;
if(n==1){
$(this).addClass("disabled").siblings(".disabled").removeClass("disabled");
}
$('#page a[class="active"]').removeClass("active").prev().addClass("active");
$(this).attr("href",n);
$.ajax({
type:'GET',
url:'data/style.php',
data:{pageNum:n,id:id},
success:function (pager) {
pageData(pager);
}
})
}
})
.on("click",'a:last',function (e) { // > 按钮
e.preventDefault();
var n=parseInt($('#page a[class="active"]').html());
var lastN=parseInt($(this).prev().html());
var html="";
var id=parseInt($("#style_nav a.hover").attr("href"));
n++;
if(n==lastN){
$(this).addClass("disabled").siblings(".disabled").removeClass("disabled");
}
if(n<=lastN){
$('#page a[class="active"]').removeClass("active").next().addClass("active");
$(this).attr("href",n);
$.ajax({
type:'GET',
url:'data/style.php',
data:{pageNum:n,id:id},
success:function (pager) {
pageData(pager);
}
})
}
});
//5 顶部页签 异步请求
$(".style_choice").on("click","a",function (e) {
e.preventDefault();
var html="";
var n=parseInt($(this).attr("href"));
$(this).addClass("hover").parent().siblings().children(".hover").removeClass("hover");
$.ajax({
type:'GET',
url:'data/style.php',
data:{id:n},
success:function (pager) {
pageData(pager);
pageNum(pager);
$("#page a:contains('1')").addClass("active").siblings(".active").removeClass("active");
}
});
});