自己修改的php分页page类,用于ajax实现翻页使用及主要的相关代码

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