php部分

  <?php

class Pager
{
    protected $prefix_url;
    protected $page_total;
    protected $current_page;
    protected $max_page;
    protected $suffix;
    protected $html = '';
    protected $pageList = [];

    /**
     * Pager constructor.
     * @param string $prefix_url    url前缀
     * @param int $page_total       总页数
     * @param int $current_page     当前页
     * @param int $max_page         显示最大页面数
     * @param string $suffix        url后缀
     */
    public function __construct($prefix_url, $page_total, $current_page = 1, $max_page = 5, $suffix = '/')
    {
        $this->prefix_url = $prefix_url ?: '';
        $this->page_total = $page_total ?: 0;
        $this->current_page = $current_page ?: 1;
        $this->max_page = $max_page ?: 5;
        $this->suffix = $suffix ?: '/';
        $this->setHtml();
    }

    /**
     * 设置分页html
     */
    private function setHtml()
    {
        if ($this->page_total <= 0) {
            $this->html = '';
        } else {
            if ($this->current_page >= 1) {
                $pre_page = $this->current_page - 1;
                $this->html .= "<a class='normal' href='{$this->prefix_url}1{$this->suffix}' target='_self'>首页</a>";
                if ($this->current_page != 1) {
                    $this->html .= "<a class='normal' href='{$this->prefix_url}{$pre_page}{$this->suffix}' target='_self'>上一页</a>";
                }
                if ($this->current_page > $this->max_page && $this->current_page <= $this->page_total) {
                    $this->pageList = range($this->current_page - $this->max_page + 1, $this->current_page);
                } elseif ($this->current_page <= $this->max_page) {
                    $this->pageList = range(1, $this->max_page);
                }
                if (empty($this->pageList)) {
                    $this->html = '';
                } else foreach ($this->pageList as $number) {
                    if ($number == $this->current_page) {
                        $this->html .= "<a class='normal selected' href='{$this->prefix_url}{$number}{$this->suffix}' target='_self'>{$number}</a>";
                    } else {
                        $this->html .= "<a class='normal' href='{$this->prefix_url}{$number}{$this->suffix}' target='_self'>{$number}</a>";
                    }
                }
                if ($this->current_page < $this->page_total) {
                    $next_page = $this->current_page + 1;
                    $this->html .= "<a class='normal' href='{$this->prefix_url}{$next_page}{$this->suffix}' target='_self'>下一页</a>
    <a class='normal' href='{$this->prefix_url}{$this->page_total}{$this->suffix}' target='_self'>尾页</a>
    <a class='normal' pointer-events:'none' target='_self'>总页数({$this->page_total}})/当前页({$this->current_page})</a>
    ";
                } else {
                    $this->html .= "<a class='normal' href='{$this->prefix_url}1{$this->suffix}' target='_self'>返回首页</a>
    <a class='normal' pointer-events:'none' target='_self'>总页数({$this->page_total}})/当前页({$this->current_page})</a>
    ";
                }
            }

        }
    }

    /**
     * 获取url
     * @return string
     */
    public function toHtml()
    {
        return $this->html ?: '';
    }
}

$pager = new Pager('http://kkkk123.com/?page=', 100, trim($_GET['page'], '.html') ?: 1, 5, '.html');
$page = $pager->toHtml();
?>

前端



<style>
    #page {
        clear: both;
        margin: 0px;
        height: auto;
        font-size: 15px;
        padding-top: 12px;
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 36px;
        text-align: center;
    }

    #page a.selected {
        color: #fff;
        background-color: #ff6600;
        border: 1px solid #ff6600;

    }

    #page a {
        box-shadow: 0px 0px 4px #f7f7f7;
        display: inline-block;
        height: 28px;
        line-height: 28px;
        padding: 0 11px;
        margin: 0 3px;
        color: #666;
        background-color: #f6f6f6;
        vertical-align: middle;
        font-size: 15px;
        text-decoration: none;
        border: 1px solid #eeeeee;
    }

    #page a:hover {
        display: inline-block;
        height: 28px;
        line-height: 28px;
        padding: 0 11px;
        margin: 0 3px;
        color: #fff !important;
        background-color: #ff6600;

        vertical-align: middle;
        font-size: 15px;
        text-decoration: none;
    }
</style>
<div id="page" class="pager">
    <?= $page; ?>
</div>

效果图

11.png

关注友儿不迷路

Last modification:May 7th, 2021 at 11:38 am
如果觉得我的文章对你有用,请随意赞赏