CodeIgniter4中如何结合Bootstrap5样式使用$pager->links()方法?
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">««</span> </a> </li> <li class="page-item"> <a class="page-link" href="<?= $pager->getPrevious() ?>" aria-label="上一页"> <span aria-hidden="true">«</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">»</span> </a> </li> <li class="page-item"> <a class="page-link" href="<?= $pager->getLast() ?>" aria-label="末页"> <span aria-hidden="true">»»</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
相关产品推荐
相关产品推荐

