自己修改的php分页page类,用于ajax实现翻页使用及主要的相关代码
原始的page分页类是别人写的,但是我需要点击页码时用ajax来翻页,为了方便我直接把分页类修改了,这样js好取数据,把相关的内容也贴过来,类中的data-p就是我添加的,data-p是页码数字,为了方便给JS获取到。类的代码比较长,先贴其他相关代码,应该是有许多需要优化的地方,鉴于目前水平,就先写成这样来用了。
生成上图效果的最终html代码
<div class="page_r"> <a data-p="1" href="javascript:void(0);">首页</a> <a data-p="2" href="javascript:void(0);">上一页</a> <a data-p="1" href="javascript:void(0);">1</a> <a data-p="2" href="javascript:void(0);">2</a> <a data-p="3" class="hover" href="javascript:void(0);">3</a> </div>
使用的CSS样式
/*分页的样式*/ .page_r a,.page span{ display:inline-block; margin:0 2px;outline:none;} .page_r a{ color:#575757; padding:0 8px;background-color:#fff; border:solid 1px #dddddd;} .page_r a:link { text-decoration:none;outline:none;} .page_r a:visited { text-decoration:none;outline:none;} .page_r a:hover,.page_r a.hover{ color:#fff !important; background-color:#ff3c00; border:solid 1px #ff3c00; text-decoration:none;} .page_r a:active { text-decoration:none;outline:none;} .page_r{text-align:right;float: right;padding:20px 0;height: 22px; line-height: 22px;text-decoration:none;}
php代码
$p="接收ajax传过来的页码p"; $param= array('totalRows' => '数据总数', 'pageSize' => '每页展示多少数据', 'currentPage' => '接收到的页码$p', 'baseUrl' => ''); //baseUrl 是基准的url 因为我改成ajax请求了 我就留空这里,不管它生成什么连接,我用不到,也可以直接把类那里改了,我没改 $pages = new Page($param); //new 一个page翻页类 //然后查询根据条件查询数据 这里就省略了 //然后将分页输出给ajax $str="<div class=\"page_r\">".$pages->pagination(1)."</div>"; echo json_encode(array('success' => '1','info'=>$str)); exit ();
js代码
/*js获取分页数据的方法,其他展示数据的地方去掉了,然后在合适的地方使用这个方法,比如页面加载完时加载分页,这样就可以实现点击页面实现不刷新页面翻页获取数据,这里主要需要用到类里生成的data-p,此处注意引入先JQ,我使用的是jquery.1.11.2.js*/ function page(p) { $.ajax({ type: "POST", url: "提交的url", dataType: "json", data: {'p':p}, success: function (data) { if (data.success == '1') { $(".page_r a").each(function(index, element) { $(this).attr('href','javascript:void(0);').on('click',function () { page($(this).attr('data-p')); }); }); } }, error: function (s) { } }); }
接下来就是php的分页page类,其中我修改过的代码片段 data-p为我增加的
/** * 首页链接 */ private function indexPage() { if($this->currentPage == 1) return; return '<a href="'.$this->url.'1" data-p="1">首页</a>'; } /** * 尾页链接 */ private function endPage() { if($this->currentPage == $this->pageAmount) return; return '<a href="'.$this->url.$this->pageAmount.'" data-p="'.$this->pageAmount.'">尾页</a>'; } /** * 上一页 */ private function prevPage() { if($this->currentPage == 1) return; return '<a href="'.$this->url.( $this->currentPage - 1 ).'" data-p="'.($this->currentPage - 1).'">上一页</a>'; } /** * 下一页 */ private function nextPage() { if($this->currentPage == $this->pageAmount) return; return '<a href="'.$this->url.( $this->currentPage + 1 ).'" data-p="'.($this->currentPage + 1).'">下一页</a>'; } /** * 中间页码的链接 * */ private function pageNumber() { $left =""; $right = ""; //如果总记录的条数“大于”所有链接的数量时候 if($this->pageAmount > ($this->offset * 2 + 1)) { //当前页码距离首页的距离 $leftNum = $this->currentPage - 1; //当前页码距离尾页的距离 $rightNum = $this->pageAmount - $this->currentPage; //当当前页码距离首页距离不足偏移量offset时候,在右边补齐缺少的小方块 if( $leftNum < $this->offset) { //左边的链接 for($i = $leftNum; $i >= 1 ; $i--) { $left .= '<a href="'.$this->url.( $this->currentPage - $i ).'" data-p="'.( $this->currentPage - $i ).'">'.( $this->currentPage - $i ).'</a>'; } //右边的链接 for($j = 1; $j <= ($this->offset * 2 - $leftNum); $j++) { $right .= '<a href="'.$this->url.( $this->currentPage + $j ).'" data-p="'.( $this->currentPage + $i ).'">'.( $this->currentPage + $j ).'</a>'; } } else if($rightNum < $this->offset) { //左边的链接 for($i = ($this->offset * 2 - $rightNum); $i >= 1 ; $i--) { $left .= '<a href="'.$this->url.( $this->currentPage - $i ).'" data-p="'.( $this->currentPage - $i ).'">'.( $this->currentPage - $i ).'</a>'; } //右边的链接 for($j = 1; $j <= $rightNum; $j++) { $right .= '<a href="'.$this->url.( $this->currentPage + $j ).'" data-p="'.( $this->currentPage + $i ).'">'.( $this->currentPage + $j ).'</a>'; } } else { //当前链接左边的链接 for($i = $this->offset; $i >= 1 ; $i--) { $left .= '<a href="'.$this->url.( $this->currentPage - $i ).'" data-p="'.( $this->currentPage - $i ).'">'.( $this->currentPage - $i ).'</a>'; } //当前链接右边的链接 for($j = 1; $j <= $this->offset; $j++) { $right .= '<a href="'.$this->url.( $this->currentPage + $j ).'" data-p="'.( $this->currentPage + $i ).'">'.( $this->currentPage + $j ).'</a>'; } } return $left.'<a href="'.$this->url.$this->currentPage.'" class="here" data-p="'.$this->currentPage.'">'.$this->currentPage.'</a>'.$right; } else { $allLink=''; //当页码总数小于需要显示的链接数量时候,则全部显示出来 for($j = 1; $j <= $this->pageAmount; $j++) { $allLink.='<a href="'.$this->url.$j.'" '.($j == $this->currentPage?$this->classHere:'').' data-p="'.$j.'">'.$j.'</a>'; } return $allLink; } }
完整分页类文件链接 :http://pan.baidu.com/s/1eRVHRLg 密码: edin