ThinkPHP5 自定义分页模板实现

发布时间:2025-05-29 11:15:34    发布者:文昌文城莱奥网络技术工作室    浏览次数:83

ThinkPHP5 自定义分页模板实现

在 ThinkPHP5 中,你可以完全自定义分页模板,不使用默认的 Bootstrap 样式。以下是实现方法:

1. 控制器中使用分页

首先在控制器中获取分页数据:

public function index(){
    // 获取分页数据
    $list = Db::name('user')->paginate(10);
    
    // 传递数据到视图
    $this->assign('list', $list);
    return $this->fetch();}

2. 创建自定义分页模板

在 view 目录下创建 page.html 文件(或者你喜欢的任何名称),例如:

<div class="my-pagination">
    {if $list->currentPage() > 1}        <a href="{$list->url($list->currentPage()-1)}" class="prev">上一页</a>
    {else}        <span class="disabled prev">上一页</span>
    {/if}
    
    {volist name="list->render()" id="page"}
        {if $page.current}            <span class="current">{$page.num}</span>
        {else}            <a href="{$page.url}">{$page.num}</a>
        {/if}
    {/volist}
    
    {if $list->currentPage() < $list->lastPage()}        <a href="{$list->url($list->currentPage()+1)}" class="next">下一页</a>
    {else}        <span class="disabled next">下一页</span>
    {/if}</div>

3. 在视图中使用自定义分页模板

在你的列表视图文件中:

<!-- 显示数据列表 -->{volist name="list" id="vo"}
    {$vo.name}
{/volist}<!-- 显示分页 -->{$list->render('page')}  <!-- 这里的'page'对应你创建的分页模板文件名 -->

4. 完全自定义样式

你可以通过 CSS 为你的分页添加任意样式:

.my-pagination {
    margin: 20px 0;
    text-align: center;}.my-pagination a, 
.my-pagination span {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;}.my-pagination a:hover {
    background: #f5f5f5;}.my-pagination .current {
    background: #428bca;
    color: white;
    border-color: #428bca;}.my-pagination .disabled {
    color: #999;
    cursor: not-allowed;}

5. 高级自定义选项

如果你需要更复杂的自定义,可以修改分页类的配置:

// 在控制器中$list = Db::name('user')->paginate(10, false, [
    'type' => 'Bootstrap',
    'var_page' => 'page',
    'path' => url('index'), // 自定义分页URL
    'query' => [], // 附加URL参数
    'fragment' => '', // URL锚点]);

6. 完全自定义分页类

如果需要更高级的控制,可以创建自己的分页驱动:

  1. 创建自定义分页驱动类 app\common\paginator\MyPaginator.php

  2. 继承 think\paginator\driver\Bootstrap

  3. 重写 render() 方法

  4. 在配置文件中设置默认分页驱动:

// config.php
'paginate' => [
    'type' => 'app\common\paginator\MyPaginator',
    'var_page' => 'page']

这样你就可以完全控制分页的HTML输出了。

补充:在 application/common/paginator 目录下创建 MyPaginator.php 文件:

<?php
namespace app\common\paginator;

use think\Paginator;

class MyPaginator extends Paginator
{
    /**
     * 渲染分页html
     * @return string
     */
    public function render()
    {
        if ($this->hasPages()) {
            return sprintf(
                '<div class="my-pagination">%s %s %s</div>',
                $this->getPreviousButton(),
                $this->getLinks(),
                $this->getNextButton()
            );
        }
        
        return '';
    }

    /**
     * 生成上一页按钮
     * @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, 'prev');
    }

    /**
     * 生成下一页按钮
     * @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, 'next');
    }

    /**
     * 生成页码按钮
     * @return string
     */
    protected function getLinks()
    {
        $html = '';

        // 计算页码范围
        $start = max(1, $this->currentPage() - 3);
        $end = min($this->lastPage, $this->currentPage() + 3);

        for ($page = $start; $page <= $end; $page++) {
            if ($page == $this->currentPage()) {
                $html .= $this->getActivePageWrapper($page);
            } else {
                $html .= $this->getAvailablePageWrapper($page);
            }
        }

        return $html;
    }

    /**
     * 生成一个可点击的按钮
     * @param string $url
     * @param string $page
     * @param string $class
     * @return string
     */
    protected function getPageLinkWrapper($url, $page, $class = '')
    {
        $class = $class ? ' class="' . $class . '"' : '';
        return '<a href="' . htmlentities($url) . '"' . $class . '>' . $page . '</a>';
    }

    /**
     * 生成一个禁用的按钮
     * @param string $text
     * @return string
     */
    protected function getDisabledTextWrapper($text)
    {
        return '<span class="disabled">' . $text . '</span>';
    }

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

    /**
     * 生成一个普通页码按钮
     * @param string $page
     * @return string
     */
    protected function getAvailablePageWrapper($page)
    {
        return $this->getPageLinkWrapper($this->url($page), $page);
    }
}