前台页面大体是这样的
默认加载指定页签的第一页数据,
单击顶部页签时,异步请求相应的第一页数据
单击底部页码时,异步请求对应页码的数据
单击前进和后退时,对应请求相关数据和按钮的禁用状态
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<