<p><strong>先来看看效果</strong></p>
新建分页类
在 \extend 目录下新建 pagination 目录(我这里写了一个 前台分页 一个后台分页,这里主要先展示一下 前台分页 )
在 Front.php 中写下如下代码
<?php
namespace paginator;
use think\facade\Request;
use think\paginator\driver\Bootstrap;class Front extends Bootstrap {
/** * 上一页按钮 * @param string $text * @return string */ protected function getPreviousButton($text = "&lt;"){ if ($this->currentPage() <= 1) { return $this->getDisabledTextWrapper($text); } $url = $this->url( $this->currentPage() - 1 ); return $this->getPageLinkWrapper($url, $text); } /** * 下一页按钮 * @param string $text * @return string */ protected function getNextButton($text = '&gt;'){ if (!$this->hasMore) { return $this->getDisabledTextWrapper($text); } $url = $this->url($this->currentPage() + 1); return $this->getPageLinkWrapper($url, $text); } /** * 渲染分页html * @param bool $total * @param bool $input * @param bool|array $params * @return mixed|string */ public function render($total = null,$input = null,$params = true){ if(!$this->total()) return false; if($total && is_array($total)) $params = $total; $this->autoAppendParams($params); if($this->options['check_page_gt_one'] && !$this->hasPages()) return false; return sprintf( '<div id="pagination"><ul class="list">%s %s %s %s %s %s</ul></div>', $this->makeCss(), $this->getPreviousButton(), $this->getLinks(), $this->getNextButton(), $this->getJumpPageInputWrapper($input), $this->getTotalCountTextWrapper($total) ); } /** * 自动拼接当前参数或指定参数 * @param $with * @return bool */ public function autoAppendParams($with) { if(!$with) return false; $params = Request::get(); foreach ($params as $key => $param){ if(strpos($key,'/') !== false) continue; if(strpos($key,'page') !== false) continue; if($with === true) parent::appends($key, $param); else if(in_array($key,$with)) parent::appends($key, $param); } } /** * 获取跳转页码输入包装器 * @param $show * @return string|null */ public function getJumpPageInputWrapper($show){ if($show === false) return false; if($show === null && !$this->options['show_input']) return false; $inputs = '<form>前往<input type="text" name="page" min="1" value="' . $this->currentPage() . '">页'; if(count($this->options['query']) > 0) { foreach ($this->options['query'] as $key => $value) { $inputs .= '<input type="hidden" name="'.$key.'" value="'.$value.'">'; } } return '<li class="page-skip">'.$inputs.'<button type="submit">确定</button></form></li>'; } /** * 生成一个共计条数的文本 * @param $show * @return string|null */ public function getTotalCountTextWrapper($show){ if($show === false) return false; if(is_null($show) && !$this->options['show_total']) return false; return "<li class='pagination-total'>共 <span>" . $this->total() . "</span> 条</li>"; } /** * 生成一个可点击的按钮 * * @param string $url * @param int $page * @return string */ protected function getAvailablePageWrapper($url, $page){ return '<li><a href="'.htmlentities($url).'">'.$page.'</a></li>'; } /** * 生成一个禁用的按钮 * * @param string $text * @return string */ protected function getDisabledTextWrapper($text) { return '<li class="disabled"><a href="javascript:;">'.$text.'</a></li>'; } /** * 生成一个激活的按钮 * * @param string $text * @return string */ protected function getActivePageWrapper($text) { return '<li class="active"><a href="javascript:;">'.$text.'</a></li>'; } /** * 分页css */ protected function makeCss(){ $activeBackground = $this->options['activeBackground']; $direction = $this->options['direction']; $direction === 'right' && $direction = 'flex-end'; $direction === 'left' && $direction = 'flex-start'; $direction === 'center' && $direction = 'center'; $totalColor = $this->options['totalColor']; return " <style type='text/css'> #pagination{display:flex;justify-content:" . $direction . ";} #pagination .list{padding:0px;margin:0px;display:inline-block;} #pagination a:hover{text-decoration:none;color:#333;} #pagination a{color:#666;display:inline-block;width:100%;height:100%;font-family: '微软雅黑';padding:0px 4px;} #pagination .list li{list-style:none;float:left; min-width:32px;height:30px;line-height:30px;text-align:center;background:#eee;margin:0 4px;} #pagination .disabled a{cursor:not-allowed;} #pagination .active a{background:". $activeBackground .";color:#fff;} #pagination .list li a:hover{background:" . $activeBackground . ";color:#fff;} #pagination .list .disabled a:hover{background:transparent;color:#999;} #pagination .list .pagination-total, #pagination .list .page-skip{background:#fff; margin-left:4px;font-size:14px;color:#666;} #pagination .list .pagination-total span{color:". $totalColor .";} #pagination .list .page-skip input{width:32px;height:24px;line-height:24px;padding:0px;text-align:center;border:1px solid #999;border-radius:6px;} #pagination .list .page-skip input:focus-visible{outline:none;} #pagination .list .page-skip button{height:24px;line-height:24px;padding:0px;background:#fff;border:1px solid #999;border-radius:4px;padding:0px 6px;} #pagination .list .page-skip input, #pagination .list .page-skip button{margin:0 4px;color:#444;} </style> "; }
}
添加配置文件
在 index 模块下的 config 目录下新建 paginate.php
<?php
return [
//分页配置
'type' => '\paginator\Front',
// 选中的背景色
'activeBackground' => '#09f',
// 显示方向 left right center
'direction' => 'right',
// 总数字体颜色
'totalColor' => '#f30',
// 是否显示总条数
'show_total' => false,
// 是否显示跳转输入框
'show_input' => false,
// 检测页码是否大于1,开启页面不足2不会显示
'check_page_gt_one' => false,
];
在控制器中使用
比如我们想分页一个文章列表
<?php
namespace app\index\controller;
class Article extends Base {
public function index(){
$articleModel = new \app\admin\model\Article;//文章模型
articleList =articleModel ->where('status',2)->paginate(9);//通过模型取出status为2的文章列表每页显示9个
page =articleList->render();//渲染分页$this -> assign([ 'list' => $articleList, 'page' => $page ]); return $this -> fetch(); }
}
在页面中使用
最后使用 {$page|raw} 来渲染分页页码
<div class="row row-cols-1 row-cols-md-3">
{volist name="list" id="vo"}
<a href="{:url('/article/detail',['id' => $vo.id])}" class="col mb-4 text-decoration-none">
<div class="card h-100">
<img src="{$vo.logo}" class="card-img-top">
<div class="card-body">
<h5 class="card-title">{$vo.title}</h5>
<p class="card-text">{$vo.desc}</p>
</div>
</div>
</a>
{/volist}
</div>
{$page|raw}
一个前端的php学习之路
PHP学习交流群?:PHP学习交流群( 901759097 )
前端学习交流群?:前端交流群 ( 1063233592 )
微信公众号?:叮当Ding