thinkphp下页面内部分内容的ajax无刷新分页thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面，这种翻页的用户体验显然是不太理想的，我们希望每次翻页只刷新我们想要的数据集部分的数据，这样我们很容易想到ajax异步通信，用ajax与数据库（本人在开发过程中使用的是mysql数据库）异步交互，将从数据库查询的数据返回，用jquery替换原有的数据,从而在不刷新这个页面的情况下进行局部刷新，从而达到我们预期的效果。
thinkphp ajax 分页类
这个分页类是网上找到的资源，大家可以直接在自己的thinkphp里创建这么一个类，我这里类名是 ajaxpage.class.php，如有需要，可修改命名空间
1f87a0dc59f026a747ee557226eb4900'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'最后一页','theme'=>' %totalrow% %header% %nowpage%/%totalpage% 页 %uppage% %downpage% %first% %prepage% %linkpage% %nextpage% %end%');// 默认分页变量名protected $varpage;public function __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);} public function nowpage($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;}public function setconfig($name,$value) { if(isset($this->config[$name])) { $this->config[$name] = $value; }}public function show() { 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=4c6ddcfa986b1cfd4b100c516dd444ceajax_func.(.$uprow.)'>.$this->config['prev'].5db79b134e9f6b82c0b36e0489ee08ed; }else{ $uppage=; } if ($downrow 8aa9cd03f13872f1c27a1dd7dc85aa49totalpages){ $downpage=4c6ddcfa986b1cfd4b100c516dd444ceajax_func.(.$downrow.)'>.$this->config['next'].5db79b134e9f6b82c0b36e0489ee08ed; }else{ $downpage=; } // 5e91ac722550d2d65fc65c3024cfc1f6 >> if($nowcoolpage == 1){ $thefirst = ; $prepage = ; }else{ $prerow = $this->nowpage-$this->rollpage; $prepage = 4c6ddcfa986b1cfd4b100c516dd444ceajax_func.(.$prerow.)'>上.$this->rollpage.页5db79b134e9f6b82c0b36e0489ee08ed; $thefirst = 4c6ddcfa986b1cfd4b100c516dd444ceajax_func.(1)' >.$this->config['first'].5db79b134e9f6b82c0b36e0489ee08ed; } if($nowcoolpage == $this->coolpages){ $nextpage = ; $theend=; }else{ $nextrow = $this->nowpage+$this->rollpage; $theendrow = $this->totalpages; $nextpage = 4c6ddcfa986b1cfd4b100c516dd444ceajax_func.(.$nextrow.)' >下.$this->rollpage.页5db79b134e9f6b82c0b36e0489ee08ed; $theend = 4c6ddcfa986b1cfd4b100c516dd444ceajax_func.(.$theendrow.)' >.$this->config['last'].5db79b134e9f6b82c0b36e0489ee08ed; } // 1 2 3 4 5 $linkpage = ; for($i=1;$i930cdc47afbfa294d5d6bff505cbe3ddrollpage;$i++){ $page=($nowcoolpage-1)*$this->rollpage+$i; if($page!=$this->nowpage){ if($page930cdc47afbfa294d5d6bff505cbe3ddtotalpages){ $linkpage .= 4c6ddcfa986b1cfd4b100c516dd444ceajax_func.(.$page.)'> .$page. 5db79b134e9f6b82c0b36e0489ee08ed; }else{ break; } }else{ if($this->totalpages != 1){ $linkpage .= c9c3467744b1ee299b813ab65906400d.$page.54bdf357c58b8a65c66d7c19c8e4d114; } } } $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）
cd43c1cac171b9d5901cb44c2adcb334count(); //实例化分页类，传入三个参数，分别是数据总数、每页显示的数据条数、要调用的jquery ajax方法名 $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(); } public function page(){ //实例化数据模型 $info=m('info'); //统计要查询数据的数量 $count=$info->count(); //实例化分页类，传入三个参数，分别是数据总数、每页显示的数据条数、要调用的jquery ajax方法名 $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
其中，引用的模板为需要分页的这部分内容
76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1e388a4556c0f65e1904146cc1a846bee hello world94b3e26ee717c64999d7867364b1b4a34826afc8bc0934c5141d6810ee82aa533f1c4e4b6b16bbbd69b2ee476dc4f83a function server(pid){ var pid = pid; $.get({:u('index/page')}, p=+pid, function(data){ $(#server).replacewith(7db81b6f8cec3ce3f482d60b8ae1b72c +data.content+ 94b3e26ee717c64999d7867364b1b4a3); }); }2cacc6d41bbb37262a98f745aa00fbf0 6432ecebf4dfccad7c9cdaa663a4dfcc2cacc6d41bbb37262a98f745aa00fbf073a6ac4ed44ffec12cee46588e518a5e
需要分页的模板
article.html
<div id="server"> <div class="row-fluid" > <div class="span12"> <div class="portlet box green"> <div class="portlet-title"> <div class="caption"><i class="icon-globe"></i>信息列表</div> </div> <div class="portlet-body" > <table class="table table-striped table-bordered table-hover table-full-width" id="sample_1"> <thead> <tr> <th class="hidden-480">a</th> <th class="hidden-480">b</th> <th class="hidden-480">c</th> <th class="hidden-480">d</th> </tr> </thead> <tbody> //循环赋值 <foreach name='list' item='info'> <tr> <td>{$info.a}</td> <td>{$info.b}</td> <td>{$info.c}</td> <td>{$info.d}</td> </tr> </foreach> </tbody> </table> //分页信息 <div class="row-fluid"> {$page} </div> </div> </div> </div> </div></div>
这样就可以保证，点击页码的时候，不会导致分页内容上边的内容会再次加载一遍，造成网页乱
3.js部分
这一步是实现ajax无刷新分页的重点，用到了jquery的ajax通信，通过与数据库的ajax交互，将获取到的数据写到模板中，替换掉之前的数据集，达到分页的目的。server.js ，可写在内部也可写在外部，自由选择
<script> function server(pid){ var pid = pid; $.get("{:u('index/page')}", "p="+pid, function(data){ $("#server").replacewith("<p id='server'>" +data.content+ "</p>"); }); }</script>
这个方法名 server 就是控制器中实例化分页类中传的第三个参数，每次在模板上点击翻页，都会触发这个js方法server（p）,里面传递的是第几页的页码。
$p=new \think\ajaxpage($count,4,'server');
这里用到的是jquery里ajax方法的.get形式进行ajax与后台通信，拿到返回的数据用replacewith方法，用
<div id='server'>+数据</div>
替换模板中id为server的p,实现分页效果。
推荐学习：《thinkphp视频教程》
以上就是详解thinkphp下部分内容的ajax无刷新分页的详细内容。