1. 思路
1)找这个文件thinkphp\library\think\paginator\driver\Bootstrap.php,编辑它,代码:
/**
* 上一页按钮
* @param string $text
* @return string
*/
protected function getPreviousButton($text = "上一页")
{
if ($this->currentPage() <= 1) {
return $this->getDisabledTextWrapper($text);
}
$url = $this->url(
$this->currentPage() - 1
);
return $this->getPageLinkWrapper($url, $text);
}
这里的$text = "??" ,里面的问号就带表你要显示的汉字,原来是需要转义的特殊符号,改成汉字了。
2)看到源码中只有上一页、下一页和具体是哪一页数字的代码,现在要添加首页和末页的代码,因为看到网上现在都是thinkphp5的自定义分页,有些许不同,根据上一页和下一页代码的规律,总结首页和末页,代码:
/**
* 首页按钮
* @param string $text
* @return string
*/
protected function getFirstButton($text = '首页')
{
if ($this->currentPage() <= 1) {
return $this->getDisabledTextWrapper($text);
}
$url = $this->url(1);
return $this->getPageLinkWrapper($url, $text);
}
/**
* 末页按钮
* @param string $text
* @return string
*/
protected function getLastButton($text = '末页')
{
if (!$this->hasMore) {
return $this->getDisabledTextWrapper($text);
}
$url = $this->url($this->lastPage());
return $this->getPageLinkWrapper($url, $text);
}
3)细心看下应该能总结点规律,这里就不多说了。
4)什么,完事了??不存在的,还有一个地方需要修改,代码:
/**
* 渲染分页html
* @return mixed
*/
public function render()
{
if ($this->hasPages()) {
if ($this->simple) {
return sprintf(
'<ul class="pager">%s %s %s %s</ul>',
$this->getFirstButton(),
$this->getPreviousButton(),
$this->getNextButton(),
$this->getLastButton()
);
}
else {
return sprintf(
'<ul class="pagination">%s %s %s %s %s</ul>',
$this->getFirstButton(),
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton(),
$this->getLastButton()
);
}
}
}
5)细心的看下代码,和原来的有什么不同,为什么找这个方法,因为在模板中需要调用这个方法,所以最后找到了它,sprintf()这个函数好像是匹配某某某,根据 %s 匹配元素的个数以及要添加的首页和末页的位置,就成了上面的代码。
6)给个 CSS 样式:
(1)在模板中的代码:
<!-- 分页 -->
<div class="mws-panel-content">
<div class="list-page">
{$data->render()|raw}
</div>
</div>
(2)代码是从 list-page 类开始的,里面具体的代码可以用 F12 查看,CSS代码:
.list-page {text-align:center;padding: 15px 15px;}
.mws-panel-content {background: #eee;}
.pagination {margin:0 !important;padding: 10px 10px;box-shadow: 0px 1px 2px 0px #E2E2E2;background: #fff;}
.pagination li{margin:0px 10px;border:1px solid #e6e6e6;padding: 3px 8px;display: inline-block;}
.pagination .active{background-color: #46A3FF;color: #fff;}
.pagination .disabled{color: #aaa;}
7) 完工,最后是这样呈现的,如图: