前言
thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面，这种翻页的用户体验显然是不太理想的，我们希望每次翻页只刷新我们想要的数据集部分的数据，这样我们很容易想到ajax异步通信，用ajax与数据库（本人在开发过程中使用的是mysql数据库）异步交互，将从数据库查询的数据返回，用jquery替换原有的数据,从而在不刷新这个页面的情况下进行局部刷新，从而达到我们预期的效果。
thinkphp ajax 分页类
这个分页类是网上找到的资源，大家可以直接在自己的thinkphp里创建这么一个类，我这里类名是 AjaxPage.class.php
<?php// +----------------------------------------------------------------------// | ThinkPHP [ WE CAN DO IT JUST THINK IT ]// +----------------------------------------------------------------------// | Copyright (c) 2009 http://thinkphp.cn All rights reserved.// +----------------------------------------------------------------------// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )// +----------------------------------------------------------------------// | Author: liu21st <liu21st@gmail.com>// +----------------------------------------------------------------------// $Id: Page.class.php 2712 2012-02-06 10:12:49Z liu21st $namespace Common\Common;class AjaxPage {// 分页栏每页显示的页数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;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="<a class='ajaxify' id='big' href='JavaScript:".$this->ajax_func."(".$upRow.")'>".$this->config['prev']."</a>";}else{$upPage="";}if ($downRow <= $this->totalPages){$downPage="<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$downRow.")'>".$this->config['next']."</a>";}else{$downPage="";}// << < > >>if($nowCoolPage == 1){$theFirst = "";$prePage = "";}else{$preRow =$this->nowPage-$this->rollPage;$prePage = "<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$preRow.")'>上".$this->rollPage."页</a>";$theFirst = "<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(1)' >".$this->config['first']."</a>";}if($nowCoolPage == $this->coolPages){$nextPage = "";$theEnd="";}else{$nextRow = $this->nowPage+$this->rollPage;$theEndRow = $this->totalPages;$nextPage = "<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$nextRow.")' >下".$this->rollPage."页</a>";$theEnd = "<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$theEndRow.")' >".$this->config['last']."</a>";}// 1 2 3 4 5$linkPage = "";for($i=1;$i<=$this->rollPage;$i++){$page=($nowCoolPage-1)*$this->rollPage+$i;if($page!=$this->nowPage){if($page<=$this->totalPages){ $linkPage .= " <a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$page.")'> ".$page." </a>";}else{break;}}else{if($this->totalPages != 1){$linkPage .= " <span class='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;}}?>登录后复制具体步骤
接下来，我们从控制器开始一步一步地实现thinkphp无刷新分页这个效果。
1.控制器部分
这只是控制器的一部分比较核心的代码。
//实例化数据模型$info=M('info');//统计要查询数据的数量$count=$info->where("ID='$id'")->count();//实例化分页类，传入三个参数，分别是数据总数、每页显示的数据条数、要调用的jQuery ajax方法名$p=new \Host\Common\AjaxPage($count,10,'server');//产生分页信息$page=$p->show();//要查询的数据,limit表示每页查询的数量，这里为10条$data = $server_info->where("ID='$id'")->limit($p->firstRow.','.$p->listRows)->select();//assign方法往模板赋值$this->assign('list',$data);$this->assign('page',$page);//ajax返回信息$res["content"] = $this->fetch('Index/myinfolist')$this->ajaxReturn($res);登录后复制2.模板部分
模板名：myinfolist.html与上面控制器中渲染的模板一致。
$res["content"] = $this->fetch('Index/myinfolist')登录后复制因为前端用的bootstrap框架，所以这个模板里的好多class是bootstrap里的，大家也不必过分纠结这个，看整个过程的重点就好。
<!DOCTYPE html><head></head><p id="server"><p class="row-fluid"><p class="span12"><p class="portlet box green"><p class="portlet-title"><p class="caption"><i class="icon-globe"></i>信息列表</p></p><p 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>//分页信息<p class="row-fluid"> {$page} </p></p></p></p></p></p><script src="__PUBLIC__/server.js"></script> </html>登录后复制3.js部分
这一步是实现ajax无刷新分页的重点，用到了jQuery的ajax通信，通过与数据库的ajax交互，将获取到的数据写到模板中，替换掉之前的数据集，达到分页的目的。
server.js
function server(id){ var id = id;$.get('/Server/myinfo', {'p':id}, function(data){//用get方法发送信息到Server中的myinfo方法 $("#server").replaceWith("<pid='user7'>" +data.content+ "</p>"); });}登录后复制这个方法名 server 就是控制器中实例化分页类中传的第三个参数，每次在模板上点击翻页，都会触发这个js方法server（p）,里面传递的是第几页的页码。
$p=new \Host\Common\AjaxPage($count,10,'server');
登录后复制这里用到的是jQuery里ajax方法的.get形式进行ajax与后台通信，拿到返回的数据用replaceWith方法，用
<pid='user7'>+数据</p>
登录后复制替换模板中id为server的p,实现分页效果。
小结
上面的步骤就是实现ajax分页的具体步骤，jQuery的ajax方法有$.ajax 、$.get 、 $.post三种，这里就不做介绍，代码粘自我的程序中，为了不公开我的一些数据字段，就用abcd代替了，也做了一定的删减，有问题希望大家指正，多多交流。
官方QQ群：
开源地址：
在线留言：