Laravel 5+ Bootstrap 4 分页器
来源:互联网 发布:分析淘宝网的特点 编辑:程序博客网 时间:2024/06/03 21:30
最近的project
里,发现需要修改Laravel
自带的Bootstrap 4
分页器。要使用自带的BS4
分页,我们需要将分页器模板导出到resources/views/vendor
文件夹下:
$ php artisan vendor:publish --tag=laravel-pagination
完成之后,我们会发现resources/views/vendor/pagination
文件夹下多出了几个模板。我们可以把带有bootstrap 4
名称的blade
模板中的代码拷贝至default.blade.php
里,这样就不需要我们在调用分页器的时候,手动添加模板名,例如:
{{ $paginator->links('view.name') }}
Laravel
文档中没有给出任何能够修改所显示的页面数量的办法,所以我们需要自己动手来实现:
{{-- Author: Eagle Luo --}}@if ($paginator->hasPages()) <ul class="pagination pagination-sm justify-content-center"> {{-- Previous Page Link and page 1 --}} @if ($paginator->onFirstPage()) <li class="page-item disabled" tabindex="-1"><span class="page-link">« 前一页</span></li> <li class="page-item active"><span class="page-link">1</span></li> @else <li class="page-item"><a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">« 前一页</a></li> <li class="page-item"><a class="page-link" href="{{ $paginator->url(1) }}">1</a></li> @endif @php $halfTotal = intval($paginator->lastPage() / 2); $limit = 6; $halfLimit = intval($limit / 2); $pageRightBound = $paginator->currentPage() + $halfLimit; $pageLeftBound = $paginator->currentPage() - $halfLimit; @endphp @if ($paginator->lastPage() <= $limit) @for ($page = 2; $page <= $paginator->lastPage(); $page++) @if ($page == $paginator->currentPage()) <li class="page-item active"><span class="page-link">{{ $page }}</span></li> @else <li class="page-item"><a class="page-link" href="{{ $paginator->url($page) }}">{{ $page }}</a></li> @endif @endfor @else {{-- When there are less than $halfLimit pages to show on left or right of the current page --}} @php if ($pageRightBound >= $paginator->lastPage() - 1) { $pageLeftBound = $paginator->lastPage() - $limit; $pageRightBound = $paginator->lastPage() - 1; } if ($pageLeftBound <= 2) { $pageRightBound = 1 + $limit; $pageLeftBound = 2; } @endphp {{-- Show three dot separator on the left --}} @if ($pageLeftBound > 2) <li class="page-item disabled" tabindex="-1"><span class="page-link">...</span></li> @endif @for ($page = $pageLeftBound; $page <= $pageRightBound; $page++) @if ($page == $paginator->currentPage()) <li class="page-item active"><span class="page-link">{{ $page }}</span></li> @else <li class="page-item"><a class="page-link" href="{{ $paginator->url($page) }}">{{ $page }}</a></li> @endif @endfor {{-- Show three dot separator on the right --}} @if ($pageRightBound < $paginator->lastPage() - 1) <li class="page-item disabled" tabindex="-1"><span class="page-link">...</span></li> @endif {{-- Display the last page --}} @if ($paginator->currentPage() == $paginator->lastPage()) <li class="page-item active"><span class="page-link">{{ $paginator->lastPage() }}</span></li> @else <li class="page-item"><a class="page-link" href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a></li> @endif @endif {{-- Pagination Elements --}} {{-- Next Page Link --}} @if ($paginator->hasMorePages()) <li class="page-item"><a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">下一页 »</a></li> @else <li class="page-item disabled" tabindex="-1"><span class="page-link">下一页 »</span></li> @endif </ul>@endif
注意,我们定义了$limit
这个变量为当前页码之前和之后最多能显示的页数之和,例如当前是第7页,那么分页器将显示:
我们可以更改$limit
来达到我们需要的效果。
如果有更好的方法,欢迎指出及指正。
阅读全文
0 0
- Laravel 5+ Bootstrap 4 分页器
- Laravel 5.1.4 + Bootstrap 3.3.5 笔记二:Laravel 路由
- Laravel 5.1.4 + Bootstrap 3.3.5 笔记三:Laravel 中间件
- Laravel 5.1.4 + Bootstrap 3.3.5 笔记四:Laravel 控制器
- Add Bootstrap to laravel 5
- Laravel 4 Tutorial / Add_Twitter-Bootstrap
- Laravel 5.1.4 + Bootstrap 3.3.5 笔记一:Laravel 环境搭建
- Laravel手动创建分页器
- Laravel手动创建分页器
- Laravel分页
- Laravel 手动创建分页器 LengthAwarePaginator
- laravel使用transformer转化器和分页
- Spring Data + Thymeleaf 3 + Bootstrap 4 实现分页器
- bootstrap分页
- bootstrap分页
- Bootstrap 分页
- bootstrap分页
- Bootstrap 分页
- 测试
- Linux查看系统信息命令
- 深度学习与神经网络-吴恩达(Part1Week4)-深度神经网络编程实现(python)-基础篇
- Docs » Learning the ArduPilot Codebase » EKF » Extended Kalman Filter Navigation Overview and Tuning
- 笔记==>map
- Laravel 5+ Bootstrap 4 分页器
- 【龙芯1c库】封装硬件SPI接口和使用示例
- vue 点击切换变色 tab 改变class 跳转链接
- 主成分分析(PCA)原理及推导
- 润乾报表 echarts统计图如何使用自定义主题
- 每日一练20171025
- 【jQuery】事件
- VM下的CentOs如何联网?
- jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo