最近都在基于tp5的框架做项目，tp5里有现成的分页，可以直接用，但是要刷新页面的翻页，客户不愿意，所以要用ajax技术来实现页面的无刷新分页，下面开始通过贴代码来说明，由于是直接从项目里拿出来的，不明白的地方我尽量用注释解释明白。
HTML部分有两部分组成：内容部分和页码部分。
1 <div class="info-list"> 2 <ul id="ul_list_b"> 3 <!--内容部分--> 4 </ul> 5 6 <nav aria-label="..." class="pg-pager"><!--页码部分--> 7 <ul class="pagination" id="page" style="min-width: 300px"> 8 <li id="pre_b" style="display: block;"><span aria-hidden="true"><</span></li> 9 <li id="page--" style="display: none;"><span aria-hidden="true">...</span></li> 10 <li id="page-4" style="display: none;"><span aria-hidden="true"></span></li> 11 <li id="page-3" style="display: none;"><span aria-hidden="true"></span></li> 12 <li id="page-2" style="display: none;"><span aria-hidden="true"></span></li> 13 <li id="page-1" style="display: none;"><span aria-hidden="true"></span></li> 14 <li id="page-0" style="display: none;"><span aria-hidden="true"></span></li> 15 <li id="pagep1" style="display: none;"><span aria-hidden="true"></span></li> 16 <li id="pagep2" style="display: none;"><span aria-hidden="true"></span></li> 17 <li id="pagep3" style="display: none;"><span aria-hidden="true"></span></li> 18 <li id="pagep4" style="display: none;"><span aria-hidden="true"></span></li> 19 <li id="pagepp" style="display: none;"><span aria-hidden="true">...</span></li> 20 <li id="next_b" style="display: block;"><span aria-hidden="true">></span></li> 21 </ul> 22 </nav> 23 </div>
js部分
<script>
var page_size={$size};
</script>
<script >
var page_cur; //当前页码
var max_cur; //最大页码
var json; //总的数据
//获取数据
function showContent(page_cur){
if(!page_cur){page_cur=1;}
// console.log(page_cur);
$.ajax( {
type: ‘GET‘,
url: "__ROOT__/index.php/index/index/invests", //tp这里的地址对应着方法
data: {page:page_cur}
,
dataType: ‘json‘,
success: function(data) {
json=data.list;
len=data.count;
page_size={$size};
max_cur=Math.ceil(len / page_size);
page_cur=parseInt(data.page);
//console.log(json, max_cur);
console.log(data,max_cur,page_size,page_cur);
$(‘#ul_list_b‘).html(‘‘);
for(var i=0; i < json.length; i++) {
var path=json[i].path;
var id=json[i].id;
var day=json[i].day;
var yearmonth=json[i].yearmonth;
var title=json[i].title;
var content=json[i].content;
$(‘<li class="info-item"><a href="investment_detail/id/‘+id+‘" class="img"><img src="‘+path+‘"></a><div class="text"><div class="date"><strong>‘+day+‘</strong><span>‘+yearmonth+‘</span></div><div class="brief"><h3><a href="investment_detail/id/‘+id+‘">‘+title+‘</a></h3><p><a href="investment_detail/id/‘+id+‘">‘+content+‘...</a></p></div></div></li>‘).appendTo($(‘#ul_list_b‘));
}
//以下是页码的生成
if(max_cur == 1){
$(‘#page‘).html(‘‘);
}
if(max_cur < 6){
noneall();
changeinner(‘page-0‘,page_cur);
for(var i=page_cur-1; i>0; i--){
changeinner(‘page-‘+i, page_cur-i);
}
for(var i=1; i<max_cur-page_cur+1; i++){
changeinner(‘pagep‘+i, page_cur+i);
}
}else{
noneall();
if(page_cur>3) changeinner(‘page--‘,‘...‘);
if(page_cur<max_cur-2) changeinner(‘pagepp‘,‘...‘);
if(page_cur<3){
for(var i=page_cur-1; i>0; i--){
changeinner(‘page-‘+i, page_cur-i);
}
for(var i=1; i<6-page_cur; i++){
changeinner(‘pagep‘+i, page_cur+i);
}
}else if(page_cur+2>max_cur){
for(var i=max_cur-page_cur; i>0; i--){
changeinner(‘pagep‘+i, page_cur+i);
}
for(var i=1; i<6-(max_cur-page_cur+1); i++){
changeinner(‘page-‘+i, page_cur-i);
}
}else{
changeinner(‘page-1‘, page_cur-1);
changeinner(‘page-2‘, page_cur-2);
changeinner(‘pagep1‘, page_cur+1);
changeinner(‘pagep2‘, page_cur+2);
}
changeinner(‘page-0‘,page_cur);
}
},
error: function() {
console.log("chucuo");
//alert("数据加载失败1");
}
})
return page_cur;
};
function changeinner(idname,content) {
var obj = document.getElementById(idname);
obj.style.display= "block";
obj.innerHTML= ‘<span aria-hidden="true">‘+content+‘</span>‘;
}
function noneinner(idname,content) {
var obj = document.getElementById(idname);
obj.style.display= "none";
obj.innerHTML= ‘<span aria-hidden="true"></span>‘;
}
function noneall() {
for(var i=1;i<5;i++){
noneinner(‘page-‘+i,‘‘);
noneinner(‘pagep‘+i,‘‘);
}
noneinner(‘page-0‘,‘‘);
noneinner(‘page--‘,‘‘);
noneinner(‘pagepp‘,‘‘);
}
page_cur = showContent();
max_cur = Math.ceil(parseInt({$count}) / parseInt({$size}));
page_size = {$size};
console.log(page_cur, max_cur, page_size);
$(‘#pre_b‘).on(‘click‘, function() {
if(page_cur !=1) {
page_cur--;
showContent(page_cur);
}
});
$(‘#next_b‘).on(‘click‘, function() {
if(page_cur !=max_cur) {
page_cur++;
showContent(page_cur);
}
});
$(‘#page-1‘).on(‘click‘, function() {
page_cur-=1;
showContent(page_cur);
});
$(‘#page-2‘).on(‘click‘, function() {
page_cur-=2;
showContent(page_cur);
});
$(‘#page-3‘).on(‘click‘, function() {
page_cur-=3;
showContent(page_cur);
});
$(‘#page-4‘).on(‘click‘, function() {
page_cur-=4;
showContent(page_cur);
});
$(‘#pagep1‘).on(‘click‘, function() {
page_cur+=1;
showContent(page_cur);
});
$(‘#pagep2‘).on(‘click‘, function() {
page_cur+=2;
showContent(page_cur);
});
$(‘#pagep3‘).on(‘click‘, function() {
page_cur+=3;
showContent(page_cur);
});
$(‘#pagep4‘).on(‘click‘, function() {
page_cur+=4;
showContent(page_cur);
});
$(‘#page--‘).on(‘click‘, function() {
page_cur=1;
showContent(page_cur);
});
$(‘#pagepp‘).on(‘click‘, function() {
page_cur=max_cur;
showContent(page_cur);
});
</script>
PHP部分：
public function invests()
{
$size = 4;//每页显示数量
$invests = Db::table(‘sri_investment)->where(‘status‘,1)->order(‘id‘)->limit(($page-1)*$size, $size)->select();
$count = Db::table(‘sri_investment)->where(‘status‘,1)->order(‘id‘)->count();
foreach ($invests as $k => $v) {
$day = date(‘d‘, $v[‘create_time‘]);
$yearmonth = date(‘Y-m‘, $v[‘create_time‘]);
$sub_content = $v[‘content‘];
$arr[‘list‘][] = array(‘id‘ =>$v[‘id‘],
‘path‘ =>$v[‘path‘],
‘day‘ =>$day,
‘yearmonth‘ =>$yearmonth,
‘title‘ =>$v[‘title‘],
‘content‘ =>$sub_content,
);
}
$arr[‘page‘] = $page;
$arr[‘count‘] = $count;
echo json_encode($arr);
}
下面是页码的样式，显示最多显示5个数字，省略号代表后面还有页码。（这个页码写了好久，主要是我的逻辑没缕清楚，加上熬夜，脑袋转不过来了，所以，大家还是少熬夜！）
第一次写这个技术类型的，有什么说不清楚的，请留言问吧，我知道的一定说清楚。
时间： 2024-07-29 19:02:14