自己修改的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