前言
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("<p id='user7'>"
+data.content+
"</p>");
});
}
这个方法名 server 就是控制器中实例化分页类中传的第三个参数，每次在模板上点击翻页，都会触发这个js方法server（p）,里面传递的是第几页的页码。
$p=new \Host\Common\AjaxPage($count,10,'server');
这里用到的是jQuery里ajax方法的.get形式进行ajax与后台通信，拿到返回的数据用replaceWith方法，用
<p id='user7'>+数据</p>
替换模板中id为server的p,实现分页效果。
小结
上面的步骤就是实现ajax分页的具体步骤，jQuery的ajax方法有$.ajax 、$.get 、 $.post三种，这里就不做介绍，代码粘自我的程序中，为了不公开我的一些数据字段，就用abcd代替了，也做了一定的删减，有问题希望大家指正，多多交流。
以上就是手把手教你实现thinkphp ajax无刷新分页的详细内容，更多请关注php中文网其它相关文章！
未经允许不得转载：任鹏个人博客 » 手把手教你实现thinkphp ajax无刷新分页
朋友圈点赞图在线生成源码
最新评论
Forex wiki. https://lt.forex-stock-bitcoin-brokers.com
Magnificent items from you, man. I have take note your stuff
Following on from the 3rd March Meetings held by economic de
It is remarkable, rather valuable message dfgdlfg2131.32
一般都会有一个沙盒期的，过了沙盒期就会慢慢放出来
百度不收录是应为是新站的原因吗？
The spike in consumer prices that left inflation at a four-d