专栏首页Web技术研发TP5系列 | ThinkPHP5自定义分页类

TP5系列 | ThinkPHP5自定义分页类

首先看看效果预览

Page.php 分页类

自定义分页类放到扩展目录 extend\page

<?php
/**
 * +----------------------------------------------------------
 * @desc: Tp5.1 自定义分页类
 * +----------------------------------------------------------
 * @Author Tinywan
 * +----------------------------------------------------------
 */
namespace page;

use think\Paginator;
class Page extends Paginator
{
    /**
     * 上一页按钮
     * @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);
    }

    /**
     * 下一页按钮
     * @param string $text
     * @return string
     */
    protected function getNextButton($text = '下一页 >')
    {
        if (!$this->hasMore) {
            return $this->getDisabledTextWrapper($text);
        }
        $url = $this->url($this->currentPage() + 1);
        return $this->getPageLinkWrapper($url, $text);
    }

    /**
     * @Desc: 统计信息
     * @return string
     */
    protected function info()
    {
        return '<li><span>共&nbsp;' . $this->total . '&nbsp;条</span></li>';
    }

    /**
     * 页码按钮
     * @return string
     */
    protected function getLinks()
    {
        if ($this->simple) {
            return '';
        }

        $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(
                    '<ul>%s %s %s</ul>',
                    $this->info(),
                    $this->getPreviousButton(),
                    $this->getNextButton()
                );
            } else {
                return sprintf(
                    '<ul>%s %s %s %s</ul>',
                    $this->info(),
                    $this->getPreviousButton(),
                    $this->getLinks(),
                    $this->getNextButton()
                );
            }
        }
    }

    /**
     * 生成一个可点击的按钮
     *
     * @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"><span>' . $text . '</span></li>';
    }

    /**
     * 生成一个激活的按钮
     *
     * @param string $text
     * @return string
     */
    protected function getActivePageWrapper($text)
    {
        return '<li class="active"><span>' . $text . '</span></li>';
    }

    /**
     * 生成省略号按钮
     *
     * @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 ($this->currentPage() == $page) {
            return $this->getActivePageWrapper($page);
        }
        return $this->getAvailablePageWrapper($url, $page);
    }
}

配置分页配置文件

在配置目录下新建 config/paginate.php文件。

return [
    'type'     => 'page\Page',
    'var_page' => 'page',
    'list_rows' => 15,
];

在模板视图中使用

代码如下所示:

<div class="pagelist">
   {$page|raw}
</div>

如何自定义CSS样式

代码如下所示:

.pagelist {
    margin-top: 50px;
    margin-bottom: 35px;
}
.pagelist ul {
    text-align: center;
    font-size: 0;
}
.pagelist ul li {
    display: inline-block;
    margin: 0 3px;
}
.pagelist ul li a {
    padding: 9px 15px;
    font-size: 14px;
    display: block;
    background: #222;
    color: #fff;
}
.pagelist ul li span {
    padding: 9px 15px;
    font-size: 14px;
    display: block;
    color: #333;
}
.pagelist ul li.active a {
    background: none;
    color: #333;
    border: 1px solid #e5e5e5;
}
.pagelist ul li.active span {
    background: none;
    color: #333;
    border: 1px solid #e5e5e5;
}
.pagelist ul li.disabled span {
    background: none;
    color: #333;
    border: 1px solid #e5e5e5;
}
.pagelist ul li.pageprev a, .pagelist ul li.pagenext a {
    background: none;
    color: #333;
    border: 1px solid #e5e5e5;
}
.pagelist ul li:hover {
    transform: scale(0.95);
}

本文分享自微信公众号 - Tinywan的杂货摊(TinywanIOT),作者:Tinywan

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Docker镜像仓库

    Tinywan
  • TP5系列 | Console 命令行(CLI模式)

    在 application 目录下面的 command.php(如果不存在则创建)文件中添加如下内容

    Tinywan
  • 通过GeoIP2分析访问者IP地理位置

    MaxMind GeoIP2 服务能识别互联网用户的地点位置与其他特征,应用广泛,包括个性化定制内容、诈欺检测、广告定向、网站流量分析、执行规定、地理目标定位、...

    Tinywan
  • 竟然可以用 effect 玩水?Cocos Creator 3D !

    最近逛论坛时,看到一位大佬在分享各种 shader 特效。基于其中的水波 shader ,白玉无冰写了一个玩水效果!文章底部获取完整代码!还可以试试水哦!

    白玉无冰
  • 腾讯原生小程序框架 OMIX 2.0 发布

    ? 好的设计只有一种,我们认为 OMIX 2.0 的设计刚刚好。 OMIX 2.0 是 WeStore 的进化版,WeStore 使用的是数据变更前后的 d...

    腾讯开源
  • SpringFramework之@Configuration/@Import注解如何解析的

        Spring版本是5.0.9.release,Springboot版本是2.0.3.release

    克虏伯
  • React Async Rendering

    React放出Fiber(2017/09/26发布的v16.0.0带上去的)到现在已经快1年了,到目前(2018/06/13发布的v16.4.1)为止,最核心的...

    ayqy贾杰
  • Flutter之Android层面源码分析(一)

    学习Flutter过程中,先撸了一遍Flutter,写了个仿boss直聘的demo, github地址:flutter_boss. 写完之后其实比较迷茫,and...

    kimihe
  • TypeScript 函数中的 this 参数

    从 TypeScript 2.0 开始,在函数和方法中我们可以声明 this 的类型,实际使用起来也很简单,比如:

    阿宝哥
  • 用JavaScript 代码来做,图片切换效果!

    用原生的JS写动画效果的确是个很令人纠结的事情,倒不如直接用jQuery来写,亦或找一些jQuery插件。能力达不到的时候,为了工作进度,只能采取心有不甘的手段...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券