【ThinkPHP5】自定义分页按钮的逻辑和样式（带效果gif）

效果

修正

/**
 * @author passerbyYSQ
 * @create 2020年4月24日 下午5:56:33
 * @update 2020-04-30
 * @update 2020-06-23
 */

如果采用Bootstrap的样式或者自己另外写CSS控制样式，只需要改动生成按钮的html标签并带上相应的class即可。分页按钮的生成逻辑不需要动。

文件

Pagehelper.php

<?php
/**
 * @author passerbyYSQ
 * @create 2020年4月24日 下午5:56:33
 * @update 2020-04-30
 * @update 2020-06-23
 */
namespace think\paginator\driver;
use think\Paginator;

class Pagehelper extends Paginator {
    public $btnCount = 7; // 按钮数（必须是奇数），否则会不对称
    
    /**
     * 渲染分页html
     *
     * @return mixed
     */
    public function render()
    {
        if ($this->hasPages()) {
            if ($this->simple) {
                return sprintf(
                    '<div class="pagination">%s %s %s</div>',
                    $this->getPreviousButton(),
                    $this->getNextButton()
                    );
            } else {
                return sprintf(
                    '<div class="pagination">%s</div>',
                    $this->getLinks()
                    );
            }
        }
    }
    
    /**
     * 页码按钮
     * @return string
     */
    protected function getLinks()
    {
        if ($this->lastPage <= $this->btnCount) {
            //return  $this->getUrlRange(1, $this->lastPage);
            return $this->getPreviousButton() .
                    $this->getUrlLinks($this->getUrlRange(1, $this->lastPage)) .
                    $this->getNextButton();
        }

        $cur = $this->currentPage;
        $half = floor($this->btnCount / 2);
        
        if ($cur > $half && $cur <= ($this->lastPage - $half)) {
            $sta = $cur - $half;
            $end = $cur + $half;
        } else if ($cur <= $half) {
            $sta = 1;
            $end = $this->btnCount;
        } else if ($cur > ($this->lastPage - $half)) {
            $sta = $this->lastPage - $this->btnCount + 1;
            $end = $this->lastPage;
        }
        
        //var_dump($sta);
        //var_dump($end);exit();
 
        return $this->getFirstButton() .
                $this->getPreviousButton() .
                $this->getUrlLinks($this->getUrlRange($sta, $end)) .
                $this->getNextButton() .
                $this->getLastButton();
    }
    
    /**
     * 批量生产页码按钮.
     *
     * @param  array $urls
     * @return string
     */
    protected function getUrlLinks(array $urls)
    {
        $html = '';
        
        foreach ($urls as $page => $url) {
            if ($page != $this->currentPage) {
                $html .= $this->getAvailablePageWrapper($url, $page);
            } else {
                $html .= $this->getCurrentPageWrapper();
            }
        }
        
        return $html;
    }
    
    /**
     * 首页按钮
     *
     * @param string $text
     * @return string
     */
    protected function getFirstButton($text = '首页')
    {
        if ($this->currentPage > ceil($this->btnCount / 2)) {
            
            $url = $this->url(1);
            
            return $this->getAvailablePageWrapper($url, $text);
        }
    }
    
    /**
     * 末页按钮
     *
     * @param string $text
     * @return string
     */
    protected function getLastButton($text = '末页')
    {
        $half = floor($this->btnCount / 2);
        if ($this->currentPage < ($this->lastPage - $half)) {
            
            $url = $this->url($this->lastPage);
            
            return $this->getAvailablePageWrapper($url, $text);
        }
    }
    
    
    /**
     * 上一页按钮
     *
     * @param string $text
     * @return string
     */
    protected function getPreviousButton($text = "上一页")
    {
        
        if ($this->currentPage() <= 1) {
            //return $this->getDisabledTextWrapper($text);
            // 当当前页为1时，不需要“上一页”的按钮
            return '';
        }
        
        $url = $this->url(
            $this->currentPage() - 1
            );
        
        return $this->getAvailablePageWrapper($url, $text);
    }
    
    /**
     * 下一页按钮
     *
     * @param string $text
     * @return string
     */
    protected function getNextButton($text = '下一页')
    {
        if (!$this->hasMore) {
            //return $this->getDisabledTextWrapper($text);
            return '';
        }
        
        $url = $this->url($this->currentPage() + 1);
        
        return $this->getAvailablePageWrapper($url, $text);
    }
    
    /**
     * 生成一个可点击的按钮
     *
     * @param string $url
     * @param int  $page
     * @return string
     */
    protected function getAvailablePageWrapper($url, $page)
    {
        return '<a href="' . htmlentities($url) . '" rel="external nofollow">' . $page . '</a>';
    }
    
    /**
     * 生成一个当前页的按钮
     *
     * @param string $text
     * @return string
     */
    protected function getCurrentPageWrapper()
    {
        return '<span>' . $this->currentPage . '</span>';
    }

}

?>

pagehelper.css【当然，你也可以自己写样式，分页的逻辑用上面的Pagehelper 】

.pagination {
	margin: 12px;
}
.pagination a {
    background:url(../image/core_bg.png) #f8f8f8;
    border-color: #c9c9c9 #bdbdbd #b0b0b0;
    border-image: none;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    color: #666666;
    display: inline-block;
    line-height: 13px;
    margin-right: 3px;
    padding: 6px 10px;
    text-decoration: none;
    vertical-align: top;
}
.pagination a:hover {
	background-color: #f8f8f8;
    border-color:#c9c9c9 #bdbdbd #b0b0b0;
    border-image:none;
    border-radius:3px;
    border-style:solid;
    border-width:1px;
    color:#666666;
    display:inline-block;
    line-height:13px;
    margin-right:3px;
    padding:6px 10px;
    text-decoration:none;
    background:#488fcf;
    border-color: #2470b5 #488fcf #488fcf;
    color:#fff;
}
.pagination span {
    background-color: #f8f8f8;
    border-color:#c9c9c9 #bdbdbd #b0b0b0;
    border-image:none;
    border-radius:3px;
    border-style:solid;
    border-width:1px;
    color:#666666;
    display:inline-block;
    line-height:13px;
    margin-right:3px;
    padding:6px 10px;
    text-decoration:none;
    background:#488fcf;
    border-color: #2470b5 #488fcf #488fcf;
    color:#fff;
}

core_bg.png

使用

1、把Pagehelper.php放到下面路径

2、修改配置文件

3、把pagehelper.css放到下面路径

4、把素材图core_bg.png放到下面路径

5、在需要使用到tp5分页的静态页面，引入css样式

6、剩下的操作，跟使用默认的分页没什么区别

这一排分页按钮的变化效果（比较难表达，用一下就清楚了），是我想要的。css样式我是拿别人的，感觉还不错。

Pagehelper.php里面的逻辑，我就懒得在博客上写了。