thinkphp5.1封装一个分页组件，tp5.1怎么封装分页组件

Posted 2021-06-06 叮当Ding

先来看看效果

---

新建分页类

在 \\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