虽然说TP5 有自带的分页的方法 也是好用 但是对于追求原页面样式的的人来说 这是不需要的
今天就来教大家 如何自己定制tp5 分页样式
1.在tp5框架目录下找到extend文件夹,并创建page文件夹,在page文件夹下中创建Page.php类文件:(下图为tp5框架目录)
2.下面是咱们刚才建立page.php 的内容
<?php
// +----------------------------------------------------------------------
// | Description: 自定义分页
// +----------------------------------------------------------------------
// | Author: phpAndy <383916522@qq.com>
// +----------------------------------------------------------------------
namespace page;
use think\Paginator;
class Page extends Paginator
{
//首页
protected function home()
{
if ($this->currentPage() > 1) {
return "<a href='" . $this->url(1) . "' title='首页'>首页</a>";
} else {
return "<p>首页</p>";
}
}
//上一页
protected function prev()
{
if ($this->currentPage() > 1) {
return "<a href='" . $this->url($this->currentPage - 1) . "' title='上一页'>上一页</a>";
} else {
return "<p>上一页</p>";
}
}
//下一页
protected function next()
{
if ($this->hasMore) {
return "<a href='" . $this->url($this->currentPage + 1) . "' title='下一页'>下一页</a>";
} else {
return "<p>下一页</p>";
}
}
//尾页
protected function last()
{
if ($this->hasMore) {
return "<a href='" . $this->url($this->lastPage) . "' title='尾页'>尾页</a>";
} else {
return "<p>尾页</p>";
}
}
//统计信息
protected function info()
{
return "<p class='pageRemark'>共<b>" . $this->lastPage .
"</b>页<b>" . $this->total . "</b>条数据</p>";
}
//项目
public function xiangmu()
{
return "
<div class='tablenav-pages'><span class='displaying-num'>" . $this->total . "项目</span>";
}
//首页
public function shouye()
{
if ($this->currentPage() > 1) {
return "
<a class='next-page' href='" . $this->url(1) . "'>
<span class='screen-reader-text'>首页</span>
<span aria-hidden='true'><<</span>
</a>";
} else {
return "<span class='pagination-links'><span class='tablenav-pages-navspan' aria-hidden='true'><<</span>";
}
}
//上一页
public function shangyiye()
{
if($this->currentPage() > 1) {
return "
<a class='next-page' href='" . $this->url($this->currentPage - 1) . "'>
<span class='screen-reader-text'>首页</span>
<span aria-hidden='true'><</span>
</a>";
}else{
return "<span class='tablenav-pages-navspan' aria-hidden='true'><</span>";
}
}
//当前页
public function dangqianye(){
return "<span class='screen-reader-text'>当前页</span>
<span id='table-paging' class='paging-input'>
<span class='tablenav-paging-text'>第 $this->currentPage 页,共<span class='total-pages'> $this->lastPage </span>页</span>
</span>";
}
//下一页
public function xiayiye(){
if ($this->hasMore) {
return " <a class='next-page' href='".$this->url($this->currentPage + 1)."'>
<span class='screen-reader-text'>下一页</span>
<span aria-hidden='true'>></span>
</a>";
} else {
return "<span class='tablenav-pages-navspan' aria-hidden='true'>></span>";
}
}
//尾页
public function weiye(){
if ($this->hasMore) {
return " <a class='next-page' href='". $this->url($this->lastPage) ."'>
<span class='screen-reader-text'>尾页</span>
<span aria-hidden='true'>>></span>
</a>";
return "<a href='" . $this->url($this->lastPage) . "' title='尾页'>尾页</a>";
} else {
return "<span class='tablenav-pages-navspan' aria-hidden='true'>>></span></span>";
}
}
/**
* 页码按钮
* @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="pagination">%s %s %s</div>',
$this->css(),
$this->prev(),
$this->getLinks(),
$this->next()
);
} else {
return sprintf(
'<!--%s--><div class="tablenav-pages">%s %s %s %s %s %s</div>',
//css 用于加载下面样式
//如果样式是是前端有写好的css样式加载 则不需要加载此处css
//$this->css(),
$this->xiangmu(),
$this->shouye(),
$this->shangyiye(),
$this->dangqianye(),
$this->xiayiye(),
$this->weiye()
//$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 href="' . htmlentities($url) . '" title="第"' . $page . '"页" >' . $page . '</a>';
}
/**
* 生成一个禁用的按钮
*
* @param string $text
* @return string
*/
protected function getDisabledTextWrapper($text)
{
return '<p class="pageEllipsis">' . $text . '</p>';
}
/**
* 生成一个激活的按钮
*
* @param string $text
* @return string
*/
protected function getActivePageWrapper($text)
{
return '<a href="" class="cur">' . $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);
}
/**
* 分页样式
*/
protected function css()
{
return ' <style type="text/css">
.pagination p{
margin:0;
cursor:pointer
}
.pagination{
height:40px;
padding:20px 0px;
}
.pagination a{
display:block;
float:left;
margin-right:10px;
padding:2px 12px;
height:24px;
border:1px #cccccc solid;
background:#fff;
text-decoration:none;
color:#808080;
font-size:12px;
line-height:24px;
}
.pagination a:hover{
color:#077ee3;
background: white;
border:1px #077ee3 solid;
}
.pagination a.cur{
border:none;
background:#077ee3;
color:#fff;
}
.pagination p{
float:left;
padding:2px 12px;
font-size:12px;
height:24px;
line-height:24px;
color:#bbb;
border:1px #ccc solid;
background:#fcfcfc;
margin-right:8px;
}
.pagination p.pageRemark{
border-style:none;
background:none;
margin-right:0px;
padding:4px 0px;
color:#666;
}
.pagination p.pageRemark b{
color:black;
}
.pagination p.pageEllipsis{
border-style:none;
background:none;
padding:4px 0px;
color:#808080;
}
.dates li {font-size: 14px;margin:20px 0}
.dates li span{float:right}
</style>';
}
}
3.然后去修改你的config配置:
//分页配置
//这是tp5自带的
// 'paginate' => [
// 'type' => 'bootstrap',
// 'var_page' => 'page',
// 'list_rows' => 15,
// ],
//自定义分页配置
'paginate' => [
//page/Page 指放在extend page文件夹下 的Page类 进行加载
'type' => 'page\Page',//分页类
'var_page' => 'page',
'list_rows' => 15,
],
4.控制器写法
public function all_user(){
$user=new UserModel();
//分页1
$paramas=$this->request->param();
$view=$user->paginate(2);
//分页2 用来保持分页状态
$view->appends($paramas);
$this->assign('view',$view);
//输出page
$this->assign('page',$view->render());
return view();
}
5.前台页面输出
<option value="administrator">管理员</option>
</select>
<input type="submit" name="changeit" id="changeit" class="button" value="更改"></div>
//输出page
{$page}
6.前台页面效果
按照以上方法写 就可以避免tp5自带的分页与网站自带的分页样式不同的问题