You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

CodeIgniter4中如何结合Bootstrap5样式使用$pager->links()方法?

我之前也踩过这个坑,折腾了好一会儿才摸清楚正确的配置方式,给你一步步拆解怎么实现:

第一步:创建自定义Bootstrap5分页模板

直接修改CI4系统目录里的分页模板会在框架升级时被覆盖,所以咱们要在项目的自定义目录里新建模板:
在app/Views下创建pagination子目录(如果没有的话自己新建),然后在里面新建bootstrap5_pagination.php文件,把下面的代码复制进去——这个代码完全贴合Bootstrap5的分页样式规范,你可以根据需求调整(比如要不要保留首尾页按钮):

<?php
$pager->setSurroundCount(2); // 控制当前页前后显示的页码数量
?>
<nav aria-label="分页导航">
    <ul class="pagination">
        <!-- 第一页 & 上一页 -->
        <?php if ($pager->hasPrevious()) : ?>
            <li class="page-item">
                <a class="page-link" href="<?= $pager->getFirst() ?>" aria-label="首页">
                    <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="<?= $pager->getPrevious() ?>" aria-label="上一页">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        <?php endif ?>

        <!-- 页码列表 -->
        <?php foreach ($pager->links() as $link) : ?>
            <li class="page-item <?= $link['active'] ? 'active' : '' ?>">
                <a class="page-link" href="<?= $link['uri'] ?>">
                    <?= $link['title'] ?>
                </a>
            </li>
        <?php endforeach ?>

        <!-- 下一页 & 最后一页 -->
        <?php if ($pager->hasNext()) : ?>
            <li class="page-item">
                <a class="page-link" href="<?= $pager->getNext() ?>" aria-label="下一页">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="<?= $pager->getLast() ?>" aria-label="末页">
                    <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
            </li>
        <?php endif ?>
    </ul>
</nav>

第二步:确认控制器里的分页逻辑

你当前的控制器代码已经没问题了,再给你补全细节避免踩坑:

$data = [];
// 注意countAllResults(false)要加false,不然会重置之前的查询条件,导致统计数量不准
$data['recordCount'] = $model->countAllResults(false);
// 第二个参数是分页组名,和视图里的调用要对应,也可以省略用默认的'default'
$data['locations'] = $model->paginate(5, 'bootstrap');
// 把分页实例传给视图
$data['pager'] = $model->pager;

// 加载视图并传参
return view('你的页面视图名', $data);

第三步:在视图里正确调用分页

你写的调用代码是对的,再给你明确下参数含义:

<?= $pager->links('bootstrap', 'bootstrap5_pagination'); ?>
  • 第一个参数'bootstrap':就是控制器里paginate()方法的第二个参数,也就是分页组名,确保两者一致就行;如果用默认组,这里改成'default'即可。
  • 第二个参数'bootstrap5_pagination':就是咱们刚才在app/Views/pagination下创建的模板文件名(不用带.php后缀)。

最后别忘了:一定要确保你的页面已经引入了Bootstrap5的CSS样式,不管是本地文件还是CDN加载,样式没引入的话分页只会显示原生HTML结构,不会有Bootstrap的样式效果。

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 12:57:58