在TP6.0引入Bootstrap4分页样式显示效果不正常
2024-08-24
27
TP6.0 默认提供的分页代码中css样式类名是Bootstrap3中的,如果项目中使用的是Bootstrap4,则不能正确展示分页样式效果,需要修改分页驱动,使其样式正确显示
1. TP6.0 默认分页
默认分页驱动类文件
vendor/topthink/think-orm/src/paginator/driver/Bootstrap.php
默认分页代码
<ul class="pagination"> <li><a href="?page=1">«</a></li> <li><a href="?page=1">1</a></li> <li class="active"><span>2</span></li> <li class="disabled"><span>»</span></li></ul>
2. 修改默认分页驱动
a. 复制默认分页驱动类
vendor/topthink/think-orm/src/paginator/driver/Bootstrap.php
b. 粘贴到 app/driver
目录下,重命名为 MyPage、修改命名空间
app/driver/MyPage.php
c. 修改文件 app/provider.php
,添加以下内容
// 修改默认分页驱动'think\Paginator' => app\driver\MyPage::class,
d. 修改自定义分页驱动文件 app/driver/MyPage.php
给 li 添加 .page-item,给 a 标签 和 span 标签添加 .page-link
e. 修改前和修改后的对比
f. 修改后的分页驱动,在 Bootstrap4.x 中可直接使用
<?phpnamespace app\driver;use think\Paginator;/** * Bootstrap 分页驱动 */class MyPage extends Paginator{ /** * 上一页按钮 * @param string $text * @return string */ protected function getPreviousButton(string $text = "«"): string { 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(string $text = '»'): string { if (!$this->hasMore) { return $this->getDisabledTextWrapper($text); } $url = $this->url($this->currentPage() + 1); return $this->getPageLinkWrapper($url, $text); } /** * 页码按钮 * @return string */ protected function getLinks(): string { 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更新于:22天前
赞一波!2
相关文章
- HTML下一页实现:简单实用的分页代码示例
- Java 中的分页处理:优雅实现下一页功能
- JS动态操控CSS样式:赋予网页无限生机
- 前端开发如何保证不同大小屏幕的显示效果
- CSS常用边距样式
- 解决ueditor编辑器复制微信文章section标签丢失class和style样式问题
- 内容页分页隐藏
- 大分类下显示子栏目列表并分页!
- 为不同的模型栏目指定不同的样式
- 列表页栏目样式风格代码
- 利用php控制导航当前页面样式
- 列表页大分类数据多,无法显示20条后面数据的分页修改方法
- 实现列表页大分类分页,万能文章大分类分页
- 会员登录样式自定义及更换登录地址
- 多模型分页样式独立管理修改
- 给不同的页面定义不同的翻页样式
- 修改分页显示多少条记录
文章评论
全部评论