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; }); ~~~