详解thinkphp下部分内容的ajax无刷新分页

下面将给大家介绍thinkphp下页面内部分内容的ajax无刷新分页，希望对需要的朋友有所帮助！

thinkphp下页面内部分内容的ajax无刷新分页

thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面，这种翻页的用户体验显然是不太理想的，我们希望每次翻页只刷新我们想要的数据集部分的数据，这样我们很容易想到ajax异步通信，用ajax与数据库（本人在开发过程中使用的是mysql数据库）异步交互，将从数据库查询的数据返回，用jquery替换原有的数据,从而在不刷新这个页面的情况下进行局部刷新，从而达到我们预期的效果。

thinkphp ajax 分页类

这个分页类是网上找到的资源，大家可以直接在自己的thinkphp里创建这么一个类，我这里类名是 AjaxPage.class.php，如有需要，可修改命名空间

<?phpnamespaceThink;classAjaxPage{//分页栏每页显示的页数public$rollPage=5;//页数跳转时要带的参数public$parameter;//默认列表每页显示行数public$listRows=20;//起始行数public$firstRow;//分页总页面数protected$totalPages;//总行数protected$totalRows;//当前页数protected$nowPage;//分页的栏的总页数protected$coolPages;//分页显示定制protected$config=array('header'=>'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'最后一页','theme'=>'%totalRow%%header%%nowPage%/%totalPage%页%upPage%%downPage%%first%%prePage%%linkPage%%nextPage%%end%');//默认分页变量名protected$varPage;publicfunction__construct($totalRows,$listRows='',$ajax_func,$parameter=''){$this->totalRows=$totalRows;$this->ajax_func=$ajax_func;$this->parameter=$parameter;$this->varPage=C('VAR_PAGE')?C('VAR_PAGE'):'p';if(!empty($listRows)){$this->listRows=intval($listRows);}$this->totalPages=ceil($this->totalRows/$this->listRows);//总页数$this->coolPages=ceil($this->totalPages/$this->rollPage);$this->nowPage=!empty($_GET[$this->varPage])?intval($_GET[$this->varPage]):1;if(!empty($this->totalPages)&&$this->nowPage>$this->totalPages){$this->nowPage=$this->totalPages;}$this->firstRow=$this->listRows*($this->nowPage-1);}publicfunctionnowpage($totalRows,$listRows='',$ajax_func,$parameter=''){$this->totalRows=$totalRows;$this->ajax_func=$ajax_func;$this->parameter=$parameter;$this->varPage=C('VAR_PAGE')?C('VAR_PAGE'):'p';if(!empty($listRows)){$this->listRows=intval($listRows);}$this->totalPages=ceil($this->totalRows/$this->listRows);//总页数$this->coolPages=ceil($this->totalPages/$this->rollPage);$this->nowPage=!empty($_GET[$this->varPage])?intval($_GET[$this->varPage]):1;if(!empty($this->totalPages)&&$this->nowPage>$this->totalPages){$this->nowPage=$this->totalPages;}$this->firstRow=$this->listRows*($this->nowPage-1);return$this->nowPage;}publicfunctionsetConfig($name,$value){if(isset($this->config[$name])){$this->config[$name]=$value;}}publicfunctionshow(){if(0==$this->totalRows)return'';$p=$this->varPage;$nowCoolPage=ceil($this->nowPage/$this->rollPage);$url=$_SERVER['REQUEST_URI'].(strpos($_SERVER['REQUEST_URI'],'?')?'':"?").$this->parameter;$parse=parse_url($url);if(isset($parse['query'])){parse_str($parse['query'],$params);unset($params[$p]);$url=$parse['path'].'?'.http_build_query($params);}//上下翻页字符串$upRow=$this->nowPage-1;$downRow=$this->nowPage+1;if($upRow>0){$upPage="<aclass='ajaxify'id='big'href='JavaScript:;'onclick='".$this->ajax_func."(".$upRow.")'>".$this->config['prev']."</a>";}else{$upPage="";}if($downRow<=$this->totalPages){$downPage="<aclass='ajaxify'id='big'href='JavaScript:;'onclick='".$this->ajax_func."(".$downRow.")'>".$this->config['next']."</a>";}else{$downPage="";}//<<<>>>if($nowCoolPage==1){$theFirst="";$prePage="";}else{$preRow=$this->nowPage-$this->rollPage;$prePage="<aclass='ajaxify'id='big'href='JavaScript:;'onclick='".$this->ajax_func."(".$preRow.")'>上".$this->rollPage."页</a>";$theFirst="<aclass='ajaxify'id='big'href='JavaScript:;'onclick='".$this->ajax_func."(1)'>".$this->config['first']."</a>";}if($nowCoolPage==$this->coolPages){$nextPage="";$theEnd="";}else{$nextRow=$this->nowPage+$this->rollPage;$theEndRow=$this->totalPages;$nextPage="<aclass='ajaxify'id='big'href='JavaScript:;'onclick='".$this->ajax_func."(".$nextRow.")'>下".$this->rollPage."页</a>";$theEnd="<aclass='ajaxify'id='big'href='JavaScript:;'onclick='".$this->ajax_func."(".$theEndRow.")'>".$this->config['last']."</a>";}//12345$linkPage="";for($i=1;$i<=$this->rollPage;$i++){$page=($nowCoolPage-1)*$this->rollPage+$i;if($page!=$this->nowPage){if($page<=$this->totalPages){$linkPage.="&nbsp;<aclass='ajaxify'id='big'href='JavaScript:;'onclick='".$this->ajax_func."(".$page.")'>&nbsp;".$page."&nbsp;</a>";}else{break;}}else{if($this->totalPages!=1){$linkPage.="&nbsp;<spanclass='current'>".$page."</span>";}}}$pageStr=str_replace(array('%header%','%nowPage%','%totalRow%','%totalPage%','%upPage%','%downPage%','%first%','%prePage%','%linkPage%','%nextPage%','%end%'),array($this->config['header'],$this->nowPage,$this->totalRows,$this->totalPages,$upPage,$downPage,$theFirst,$prePage,$linkPage,$nextPage,$theEnd),$this->config['theme']);return$pageStr;}}

具体步骤

1、控制器

现在index方法里display，再在page方法里fetch，ajaxReturn，这里要注意fetch的是引用页（article）

<?phpnamespaceHome\\Controller;useThink\\Controller;classIndexControllerextendsController{publicfunctionindex(){$info=M('info');//统计要查询数据的数量$count=$info->count();//实例化分页类，传入三个参数，分别是数据总数、每页显示的数据条数、要调用的jQueryajax方法名$p=new\\Think\\AjaxPage($count,4,'server');//产生分页信息$page=$p->show();//要查询的数据,limit表示每页查询的数量，这里为4条$data=$info->limit($p->firstRow.','.$p->listRows)->select();//assign方法往模板赋值$this->assign('list',$data);$this->assign('page',$page);//$res["content"]=$this->fetch('Index/index');//$this->ajaxReturn($res);$this->display();}publicfunctionpage(){//实例化数据模型$info=M('info');//统计要查询数据的数量$count=$info->count();//实例化分页类，传入三个参数，分别是数据总数、每页显示的数据条数、要调用的jQueryajax方法名$p=new\\Think\\AjaxPage($count,4,'server');//产生分页信息$page=$p->show();//要查询的数据,limit表示每页查询的数量，这里为4条$data=$info->limit($p->firstRow.','.$p->listRows)->select();//assign方法往模板赋值$this->assign('list',$data);$this->assign('page',$page);//ajax返回信息$res["content"]=$this->fetch('Index/article');$this->ajaxReturn($res);}}

2、模板

柱模板 index.html

其中，引用的模板为需要分页的这部分内容

<!DOCTYPEhtml><html><head></head><p>helloworld</p><includefile="Index/article"/><script>functionserver(pid){varpid=pid;$.get("{:U('Index/page')}","p="+pid,function(data){$("#server").replaceWith("<pid='server'>"+data.content+"</p>");});}</script><scriptsrc="__PUBLIC__/jq/jquery1.8.3.min.js"></script></html>

需要分页的模板

article.html

<divid="server"><divclass="row-fluid"><divclass="span12"><divclass="portletboxgreen"><divclass="portlet-title"><divclass="caption"><iclass="icon-globe"></i>信息列表</div></div><divclass="portlet-body"><tableclass="tabletable-stripedtable-borderedtable-hovertable-full-width"id="sample_1"><thead><tr><thclass="hidden-480">a</th><thclass="hidden-480">b</th><thclass="hidden-480">c</th><thclass="hidden-480">d</th></tr></thead><tbody>//循环赋值<foreachname='list'item='info'><tr><td>{$info.a}</td><td>{$info.b}</td><td>{$info.c}</td><td>{$info.d}</td></tr></foreach></tbody></table>//分页信息<divclass="row-fluid">{$page}</div></div></div></div></div></div>

这样就可以保证，点击页码的时候，不会导致分页内容上边的内容会再次加载一遍，造成网页乱

3、js部分

这一步是实现ajax无刷新分页的重点，用到了jQuery的ajax通信，通过与数据库的ajax交互，将获取到的数据写到模板中，替换掉之前的数据集，达到分页的目的。server.js ，可写在内部也可写在外部，自由选择

<script>functionserver(pid){varpid=pid;$.get("{:U('Index/page')}","p="+pid,function(data){$("#server").replaceWith("<pid='server'>"+data.content+"</p>");});}</script>

这个方法名 server 就是控制器中实例化分页类中传的第三个参数，每次在模板上点击翻页，都会触发这个js方法server（p）,里面传递的是第几页的页码。

$p=new\\Think\\AjaxPage($count,4,'server');

这里用到的是jQuery里ajax方法的.get形式进行ajax与后台通信，拿到返回的数据用replaceWith方法，用

<divid='server'>+数据</div>

替换模板中id为server的p,实现分页效果。