tp5的ajax分页实现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tp5的ajax分页实现相关的知识，希望对你有一定的参考价值。
最近都在基于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个数字，省略号代表后面还有页码。（这个页码写了好久，主要是我的逻辑没缕清楚，加上熬夜，脑袋转不过来了，所以，大家还是少熬夜！）
第一次写这个技术类型的，有什么说不清楚的，请留言问吧，我知道的一定说清楚。
以上是关于tp5的ajax分页实现的主要内容，如果未能解决你的问题，请参考以下文章
TP5报如下的错误 Indirect modification of overloaded element of thinkpaginatorCollection has no effect(代码片段