PHP tp6 ThinkPHP6 实现自定义页码样式

实现的效果：

左边显示当前页面，总页数和总条数。

当选择第一页或者首页时，自动隐藏首页和上一页按钮，下一页和尾页显示并可以点击，当前页数变为橙色且不可点击。

当选择中间的页数时，选择的页码不可点击，首页和上一页，以及下一页和尾页都可以点击并跳转。

当选择尾页或者到达最后一页时，首页和上一页显示并可以点击，自动隐藏下一页和尾页按钮，且页码不可点击。

提示：此页码样式需要layui.css，我在文章末尾提供了一个链接，可以直接引用。

因为要更改tp6默认的页码样式，所以我们首先新建CustomPaginate.php文件，放在app/admin目录下。然后将以下代码插入到CustomPaginate.php中。

主要的改动：

增加了首页和尾页以及总页码。

// 首页
protected function getfirst($text="首页"){
    if ($this->currentPage() <= 1) {
        return null;
    }
    $url = $this->url(1);
    return $this->getPageLinkWrapper($url, $text);
}
// 尾页
protected function getlast($text="尾页"){
    if ($this->currentPage() == $this->lastPage) {
        return null;
    }
    $url = $this->url($this->lastPage);
    return $this->getPageLinkWrapper($url, $text);
}

// 总页码
protected function getTotal(){
    return '<span class="layui-btn layui-btn-primary" style="margin-right: 10px;">第'.$this->currentPage.'页,共'.$this->lastPage.'页/'.$this->total().'条数据</span>';
}

可点击按钮处的样式修改为

class="layui-btn"

 激活按钮改为

<span class="layui-btn layui-btn-danger">' . $text . '</span>

为了美观，我这里舍弃了禁用按钮，也就是前面提到的，当页码为第一页时，将首页和上一页的禁用按钮改为隐藏。当页码为最后一页时，将尾页和下一页的禁用按钮改为隐藏。

然后改动最大的是渲染分页处。

<div class="layui-form-item">
    <div class="layui-inline">
    %s
        <div class="layui-btn-group">
            %s %s %s %s %s
        </div>
    </div>
</div>',
$this->getTotal(),//总页数
$this->getfirst(), //首页
$this->getPreviousButton(),//上一页
$this->getLinks(),//页码
$this->getNextButton(),//下一页
$this->getlast()//尾页

全部源码：

<?php
namespace app\admin;
use think\Paginator;
class CustomPaginate extends Paginator
{

    /**
     * 上一页按钮
     * @param string $text
     * @return string|null
     */
    protected function getPreviousButton(string $text = "上一页"): ?string
    {

        if ($this->currentPage() <= 1) {
            return null;
        }

        $url = $this->url(
            $this->currentPage() - 1
        );

        return $this->getPageLinkWrapper($url, $text);
    }

    /**
     * 下一页按钮
     * @param string $text
     * @return string|null
     */
    protected function getNextButton(string $text = '下一页'): ?string
    {
        if (!$this->hasMore) {
            return null;
        }

        $url = $this->url($this->currentPage() + 1);

        return $this->getPageLinkWrapper($url, $text);
    }

    /**
     * 页码按钮
     * @return string
     */
    protected function getLinks(): string
    {
        if ($this->simple) {
            return '';
        }

        $block = [
            'first'  => null,
            'slider' => null,
            'last'   => null,
        ];

        $side   = 3;
        $window = $side * 2;

        if ($this->lastPage < $window + 6) {
            $block['first'] = $this->getUrlRange(1, $this->lastPage);
        } elseif ($this->currentPage <= $window) {
            $block['first'] = $this->getUrlRange(1, $window + 2);
            $block['last']  = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
        } elseif ($this->currentPage > ($this->lastPage - $window)) {
            $block['first'] = $this->getUrlRange(1, 2);
            $block['last']  = $this->getUrlRange($this->lastPage - ($window + 2), $this->lastPage);
        } else {
            $block['first']  = $this->getUrlRange(1, 2);
            $block['slider'] = $this->getUrlRange($this->currentPage - $side, $this->currentPage + $side);
            $block['last']   = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
        }

        $html = '';

        if (is_array($block['first'])) {
            $html .= $this->getUrlLinks($block['first']);
        }

        if (is_array($block['slider'])) {
            $html .= $this->getDots();
            $html .= $this->getUrlLinks($block['slider']);
        }

        if (is_array($block['last'])) {
            $html .= $this->getDots();
            $html .= $this->getUrlLinks($block['last']);
        }

        return $html;
    }

    /**
     * 渲染分页html
     * @return mixed
     */
    public function render()
    {
        if ($this->hasPages()) {
            if ($this->simple) {
                return sprintf(
                    '<div class="layui-form-item"><div class="layui-inline"><div class="layui-btn-group">%s %s</div></div></div>',
                    $this->getPreviousButton(),
                    $this->getNextButton()
                );
            } else {
                return sprintf(
                    '<div class="layui-form-item"><div class="layui-inline">%s<div class="layui-btn-group">%s %s %s %s %s</div></div></div>',
                    $this->getTotal(),
                    $this->getfirst(),
                    $this->getPreviousButton(),
                    $this->getLinks(),
                    $this->getNextButton(),
                    $this->getlast()
                );
            }
        }
    }
    // 首页
    protected function getfirst($text="首页"){
        if ($this->currentPage() <= 1) {
            return null;
        }
        $url = $this->url(1);
        return $this->getPageLinkWrapper($url, $text);
    }
    // 尾页
    protected function getlast($text="尾页"){
        if ($this->currentPage() == $this->lastPage) {
            return null;
        }
        $url = $this->url($this->lastPage);
        return $this->getPageLinkWrapper($url, $text);
    }
    // 总页码
    protected function getTotal(){
        return '<span class="layui-btn layui-btn-primary" style="margin-right: 10px;">第'.$this->currentPage.'页,共'.$this->lastPage.'页/'.$this->total().'条数据</span>';
    }
    /**
     * 生成一个可点击的按钮
     *
     * @param  string $url
     * @param  string $page
     * @return string
     */
    protected function getAvailablePageWrapper(string $url, string $page): string
    {
        return '<a href="' . htmlentities($url) . '" class="layui-btn">' . $page . '</a>';
    }

    /**
     * 生成一个禁用的按钮
     *
     * @param  string $text
     * @return string
     */
    protected function getDisabledTextWrapper(string $text): string
    {
        return '<span disabled class="layui-btn layui-btn-danger">' . $text . '</span>';
    }

    /**
     * 生成一个激活的按钮
     *
     * @param  string $text
     * @return string
     */
    protected function getActivePageWrapper(string $text): string
    {
        return '<span class="layui-btn layui-btn-danger">' . $text . '</span>';
    }

    /**
     * 生成省略号按钮
     *
     * @return string
     */
    protected function getDots(): string
    {
        return $this->getDisabledTextWrapper('...');
    }

    /**
     * 批量生成页码按钮.
     *
     * @param  array $urls
     * @return string
     */
    protected function getUrlLinks(array $urls): string
    {
        $html = '';

        foreach ($urls as $page => $url) {
            $html .= $this->getPageLinkWrapper($url, $page);
        }

        return $html;
    }

    /**
     * 生成普通页码按钮
     *
     * @param  string $url
     * @param  string    $page
     * @return string
     */
    protected function getPageLinkWrapper(string $url, string $page): string
    {
        if ($this->currentPage() == $page) {
            return $this->getActivePageWrapper($page);
        }
        return $this->getAvailablePageWrapper($url, $page);
    }

}

然后在 app目录下的provider.php文件新加一句

'think\Paginator'   => app\admin\CustomPaginate::class

表示使用自定义页码文件。

然后在页面中需要这样引用这个页码样式。

{$pages|raw}

这个样式需要导入layui.css.