ajax分頁 · 跟老楊學ThinkPHP3

ajax分頁是項目中常會遇到的需求，以前老楊寫過一個，比較復雜。 ##效果老楊重新寫了實現了一下，效果如下： ![](https://box.kancloud.cn/2015-11-28_5659797451b7f.png) 在隨時示列里，大家可以看到，然后我們點新創打開，可以看到帶地址的。 ![](https://box.kancloud.cn/2015-11-28_565979746921b.png) 點第二頁 ![](https://box.kancloud.cn/2015-11-28_565979747b302.png) 地址沒有變化。而切換為普通分頁后，地址是變的 ![](https://box.kancloud.cn/2015-11-28_565979749539f.png) ## 關鍵代碼 ~~~ public function index($p = 1){ $use_ajax = I('get.use_ajax', cookie('use_ajax')); cookie('use_ajax', $use_ajax); $this->assign('use_ajax', $use_ajax); $num_perpage = 5; $article = D('page'); $list = $article->order('id desc')->page($p, $num_perpage)->select(); $count = $article->count(); $Page = new \Think\Page($count, $num_perpage); $Page->setConfig('theme', '%UP_PAGE% %LINK_PAGE% %DOWN_PAGE%'); $show = $Page->show(); $this->assign("list", $list); $this->assign('page', $show); if(IS_AJAX){ //調用indexajax.html模板渲染數據 $html = $this->fetch('index_ajax'); //ajax輸出數據 $this->ajaxReturn($html); } //第一頁時使用默認的index.html模板渲染數據 $this->display(); } ~~~ 其實就是 IS_AJAX那個分支的時候選擇返回分頁后的數據渲染不包括公共部分的。 index.html: ~~~ <table cellpadding=3 cellspacing=5> <volist name="list" id="vo"> <tr> <td style="border-bottom:1px solid silver;"> <span style="color:gray">[ {$vo.create_at} ]</span> {$vo.title} </td> </tr> </volist> <tr></tr> </table> <div class="result page" id="page">{$page}</div> <?php if (cookie('use_ajax')): ?> <script> $(function(){ $("#page a").on('click',function(){ var pageObj = this; var url = pageObj.href; $.get(url,{},function(data){ $("#pagenavlist").html(data); },'json'); return false; }); }); </script> <?php endif ?> ~~~ index.html ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ThinkPHP示例: ajax分頁操作</title> <base href="/"> <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> *{ padding: 0; margin: 0;font-size:16px; font-family: "微軟雅黑"} body{ background: #fff; color: #333;} h2{font-size:36px} div.result{border:1px solid #d4d4d4; background:#FFC;color:#393939; padding:8px 10px;float:auto; width:450px;margin:2px} a{text-decoration:none; color:gray;} a:hover{color:#F60;} div.page{border:1px solid #d4d4d4; background:#333;color:white; padding:5px 15px;float:auto; width:450px;margin:2px;text-align:right} </style> </head> <body> <h2>ThinkPHP示例：ajax分頁操作</h2> <div class="result"> 分頁模式： <select name="use_ajax" id="use_ajax"> <option value="1" href="{:U('Page/index', 'use_ajax=1')}" <eq name="use_ajax" value="1">selected</eq>>Ajax分頁</option> <option value="0" href="{:U('Page/index', 'use_ajax=0')}" <eq name="use_ajax" value="0">selected</eq>>普通分頁</option> </select> </div> <div id="pagenavlist"> <include file="index_ajax" /> </div> <script> $(function(){ $('#use_ajax').on('change', function(){ location.href = $('option:selected', this).attr('href'); }); }) </script> </body> </html> ~~~ 其實就是 ajax 頁面里通過cookie 判斷是否有ajax分頁的js有就ajax分頁。 qjax分頁的原理是將原來分頁頁碼列表的a點擊事件的跳轉替換為jquery ajax請求，請求完替換固定顯示內容區域。就是下面這段js ~~~ $("#page a").on('click',function(){ var pageObj = this; var url = pageObj.href; $.get(url,{},function(data){ $("#pagenavlist").html(data); },'json'); return false; }); ~~~