thinkphp ajax 无刷新分页效果的实现
思路：先做出传统分页效果，然后重新复制一份Page.class.php类，对它进行修改，把js中的函数传到page类中，把上一页、下一页、首页、尾页、链接页中的url地址改成js控制的函数，模板页面中用jQuery写一个js函数，里面用ajax把请求发到控制器并返回请求回来的json数据，实现了ajax的无刷新分页效果。
Page.class.php代码（红色代码部分为需要修改的部分，其他的跟原来的类函数一样）：
<?php // +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK IT ] // +---------------------------------------------------------------------- // | Copyright (c) 2006-2014 http://thinkphp.cn All rights reserved. // +---------------------------------------------------------------------- // | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) // +---------------------------------------------------------------------- // | Author: 麦当苗儿 <zuojiazi@vip.qq.com> <http://www.zjzit.cn> // +---------------------------------------------------------------------- namespace Home\Clas; class Page{ public $firstRow; // 起始行数 public $listRows; // 列表每页显示行数 public $parameter; // 分页跳转时要带的参数 public $totalRows; // 总行数 public $totalPages; // 分页总页面数 public $rollPage = 11;// 分页栏每页显示的页数 public $lastSuffix = true; // 最后一页是否显示总页数 private $p = 'p'; //分页参数名 private $url = ''; //当前链接URL private $nowPage = 1; // 分页显示定制 private $config = array( 'header' => '<span class="rows">共 %TOTAL_ROW% 条记录</span>', 'prev' => '<<', 'next' => '>>', 'first' => '1...', 'last' => '...%TOTAL_PAGE%', 'theme' => '%FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END%', ); /** * 架构函数 * @param array $totalRows 总的记录数 * @param array $listRows 每页显示记录数 * @param array $parameter 分页跳转的参数 */ public function __construct($totalRows, $listRows=20, $ajax_func,$parameter = array()) { C('VAR_PAGE') && $this->p = C('VAR_PAGE'); //设置分页参数名称 /* 基础设置 */ $this->totalRows = $totalRows; //设置总记录数 $this->listRows = $listRows; //设置每页显示行数 $this->ajax_func = $ajax_func; $this->parameter = empty($parameter) ? $_GET : $parameter; $this->nowPage = empty($_GET[$this->p]) ? 1 : intval($_GET[$this->p]); $this->nowPage = $this->nowPage>0 ? $this->nowPage : 1; $this->firstRow = $this->listRows * ($this->nowPage - 1); } /** * 定制分页链接设置 * @param string $name 设置名称 * @param string $value 设置值 */ public function setConfig($name,$value) { if(isset($this->config[$name])) { $this->config[$name] = $value; } } /** * 生成链接URL * @param integer $page 页码 * @return string */ private function url($page){ return str_replace(urlencode('[PAGE]'), $page, $this->url); } /** * 组装分页链接 * @return string */ public function show() { if(0 == $this->totalRows) return ''; /* 生成URL */ $this->parameter[$this->p] = '[PAGE]'; $this->url = U(ACTION_NAME, $this->parameter); /* 计算分页信息 */ $this->totalPages = ceil($this->totalRows / $this->listRows); //总页数 if(!empty($this->totalPages) && $this->nowPage > $this->totalPages) { $this->nowPage = $this->totalPages; } /* 计算分页临时变量 */ $now_cool_page = $this->rollPage/2; $now_cool_page_ceil = ceil($now_cool_page); $this->lastSuffix && $this->config['last'] = $this->totalPages; //上一页 $up_row = $this->nowPage - 1; $up_page = $up_row > 0 ? '<a class="prev" href="javascript:'.$this->ajax_func.'('.$up_row.')">' . $this->config['prev'] . '</a>' : ''; //下一页 $down_row = $this->nowPage + 1; $down_page = ($down_row <= $this->totalPages) ? '<a class="next" href="javascript:'.$this->ajax_func.'('.$down_row.')">' . $this->config['next'] . '</a>' : ''; //第一页$down_row $the_first = ''; if($this->totalPages > $this->rollPage && ($this->nowPage - $now_cool_page) >= 1){ $the_first = '<a class="first" href="javascript:'.$this->ajax_func.'(1)">' . $this->config['first'] . '</a>'; } //最后一页 $the_end = ''; if($this->totalPages > $this->rollPage && ($this->nowPage + $now_cool_page) < $this->totalPages){ $the_end = '<a class="end" href="javascript:'.$this->ajax_func.'('.$this->config['last'].')">' . $this->config['last'] . '</a>'; } //数字连接 $link_page = ""; for($i = 1; $i <= $this->rollPage; $i++){ if(($this->nowPage - $now_cool_page) <= 0 ){ $page = $i; }elseif(($this->nowPage + $now_cool_page - 1) >= $this->totalPages){ $page = $this->totalPages - $this->rollPage + $i; }else{ $page = $this->nowPage - $now_cool_page_ceil + $i; } if($page > 0 && $page != $this->nowPage){ if($page <= $this->totalPages){ $link_page .= '<a class="num" href="javascript:'.$this->ajax_func.'('.$page.')">' . $page . '</a>'; }else{ break; } }else{ if($page > 0 && $this->totalPages != 1){ $link_page .= '<span class="current">' . $page . '</span>'; } } } //替换分页内容 $page_str = str_replace( array('%HEADER%', '%NOW_PAGE%', '%UP_PAGE%', '%DOWN_PAGE%', '%FIRST%', '%LINK_PAGE%', '%END%', '%TOTAL_ROW%', '%TOTAL_PAGE%'), array($this->config['header'], $this->nowPage, $up_page, $down_page, $the_first, $link_page, $the_end, $this->totalRows, $this->totalPages), $this->config['theme']); return "<div>{$page_str}</div>"; } }
控制器代码：
public function user(){ $credit = M('user'); $count = $credit->count(); //计算记录数 $limitRows = 5; // 设置每页记录数 $p = new Page($count, $limitRows,"user"); //第三个参数是你需要调用换页的ajax函数名 $limit_value = $p->firstRow . "," . $p->listRows; $data = $credit->limit($limit_value)->select(); // 查询数据 $page = $p->show(); // 产生分页信息，AJAX的连接在此处生成 $this->assign('list',$data); $this->assign('page',$page); $this->display(); } public function ajax(){ $credit = M('user'); $count = $credit->count(); //计算记录数 $limitRows = 5; // 设置每页记录数 $p = new Page($count, $limitRows,"user"); //第三个参数是你需要调用换页的ajax函数名 $limit_value = $p->firstRow . "," . $p->listRows; $data = $credit->limit($limit_value)->select(); // 查询数据 $page = $p->show(); // 产生分页信息，AJAX的连接在此处生成 $data[]=$page;//将分页显示也放到数组里 $jdata=json_encode($data);//将整个数组转换成json编码的数组 $this->ajaxReturn($jdata); }
html代码：
<!DOCTYPE html> <html lang="en"> <head> <title>Ajax无刷新分页</title> <script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script> <script type="text/javascript"> function user(id){ //user函数名 一定要和action中的第三个参数一致上面有 var id = id; $.get('ajax', {'p':id}, function(data){ //用get方法发送信息到ajax方法 var info=eval(data);//将返回的json数据转换成js对象 var s='<table><tr><td>id</td><td>姓名</td></tr>'; for (var i = 0; i <info.length-1; i++) { s+='<tr>'; s+='<td>'+info[i].id+'</td>'; s+='<td>'+info[i].name+'</td>'; s+='</tr>' } s+='</table>'; s+="<div class='pagelist'>"+info[info.length-1]+"</div>"; $('#user').replaceWith("<div id='user' align='center'>"+s+"</div>"); }); } </script> <style> .pagelist{ text-align:center; background:#f1f1f1; padding:7px 0; } .pagelist a{ text-decoration: none; margin:0 5px; border:#6185a2 solid 1px; display:inline-block; padding:2px 6px 1px; line-height:16px; background:#fff; color:#6185a2; } /*点击页码之后改变此点击页码的字体颜色和背景色，span为分页类内部的标签*/ .pagelist span{ margin:0 5px; border:#6185a2 solid 1px; display:inline-block; padding:2px 6px 1px; line-height:16px; color:#fff; background:#6185a2; } </style> </head> <body> <h1 align='center'>AJAX无刷新分页</h1> <div id='user' align='center'> <!--这里的user和下面js中的test要一致--> <table> <tr><td>id</td><td>姓名</td></tr> <volist id='list' name='list'> <!--内容输出--> <tr> <td>{$list.id}</td><td>{$list.name}</td> </tr> </volist> </table> <div class='pagelist'> {$page} <!--分页输出--> </div> </div> </body> </html>
效果图：
