### 显示效果
![](https://blog.junphp.com/public/upload/20220712/c846fb4971376612aa6ee4c0ce7b3a8e.jpg)

### 创建Page类
文件创建在`\extend\page\Pc.php`：
```php
<?php
namespace page;
use think\Paginator;

class Pc extends Paginator
{
	//首页
    protected function home() {
        if ($this->currentPage() > 1) {
            return '<a class="text-page-tag" href="'. $this->url(1) .'">首页</a>';
        } else {
            return '<span class="disabled_page">首页</span>';
        }
    }
    //尾页
    protected function last() {
        if ($this->hasMore) {
            return '<a class="text-page-tag" href="'. $this->url($this->lastPage) .'">尾页</a>';
        } else {
            return '<span class="disabled_page">尾页</span>';
        }
    }
    //上一页
    protected function prev() {
        if ($this->currentPage() > 1) {
            return '<a class="text-page-tag" href="'. $this->url($this->currentPage - 1) .'">上一页</a>';
        } else {
            return '<span class="disabled_page">上一页</span>';
        }
    }
    //下一页
    protected function next() {
        if ($this->hasMore) {
            return '<a class="text-page-tag" href="'. $this->url($this->currentPage + 1) .'">下一页</a>';
        } else {
            return '<span class="disabled_page">下一页</span>';
        }
    }
    //统计信息
	protected function info(){
		return '';
	    // return "<p class='pageRemark'>共<b>" . $this->lastPage . "</b>页<b>" . $this->total . "</b>条数据</p>";
	}
    /**
     * 页码按钮
     * @return string
     */
    protected function getLinks()
    {

$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(
                    '%s<div class="page">%s %s %s</div>',
                    $this->css(),
                    $this->prev(),
                    $this->getLinks(),
                    $this->next()
                );
            } else {
                return sprintf(
                    '%s<div class="page">%s %s %s %s %s %s</div>',
                    $this->css(),
                    $this->home(),
                    $this->prev(),
                    $this->getLinks(),
                    $this->next(),
                    $this->last(),
                    $this->info()
                );
            }
        }
    }

/**
     * 生成一个可点击的按钮
     *
     * @param  string $url
     * @param  int    $page
     * @return string
     */
    protected function getAvailablePageWrapper($url, $page)
    {
        return '<a class="text-page-tag" href="' . htmlentities($url) . '" title="第"'. $page .'"页" >' . $page . '</a>';
    }

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

/**
     * 生成一个激活的按钮
     *
     * @param  string $text
     * @return string
     */
    protected function getActivePageWrapper($text)
    {
        return '<a href="javascript:void(0)" class="active text-page-tag">' . $text . '</a>';
    }

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

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

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

return $html;
    }

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

return $this->getAvailablePageWrapper($url, $page);
    }
    
    /**
     * 样式
     *
     * @return string
     */
    protected function css(){
    	return '';
    }
}
```

### 控制器调用时指定使用
```php
$list = \think\Db::name('service')
	->where($where)->paginate(10, false, [
		'type'      => '\page\Pc',
		'var_page'  => 'page',
	]);
$page = $list->render();
$this->assign('list', $list);
$this->assign('page', $page);
```

### CSS样式
```css
.page {
    width: 1152px;
    margin: 35px auto;
    overflow: hidden;
    clear: both;
    text-align: center;
}
.page span, .page-disabled {
    display: inline-block;
    padding: 0 4px;
    min-width: 24px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #c8cdd2;
    text-align: center;
}
.page a {
    display: inline-block;
    margin: 0 8px;
    padding: 0 4px;
    min-width: 24px;
    line-height: 32px;
    font-size: 14px;
    color: #4d555d;
    text-align: center;
    border-radius: 16px;
    -webkit-transition: border-color .2s;
    -moz-transition: border-color .2s;
    transition: border-color .2s;
}
.page a.text-page-tag.active {
    background: #4d555d;
    color: #fff;
}
.page a.text-page-tag:hover {
    background: #d9dde1;
    color: #4d555d;
    text-decoration: none;
}
```

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺