laravel 自定义分页样式
- 作者 : zfajax舫
- |
- 发布时间 : 6年前
- |
- 评论数 : 0
- 查看数 : 43
第一步将 创建分页视图资源
自定义分页视图的最简单方法是使用以下命令将其导出到目录中
php artisan vendor:publish --tag=laravel-pagination
第二步 指定默认的视图样式
打开文件`app\Providers\AppServiceProvider.php`
<?php
namespace App\Providers;
use Illuminate\Pagination\Paginator; #需要使用的包
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Paginator::defaultView('vendor.pagination.web'); #定义前端分页视图样式
}
}
第三步 编辑之前发布的资源
这个是需要根据自己的需求更改的.不要照抄`resources\views\vendor\pagination\web.blade.php`
@if ($paginator->hasPages())
<nav aria-label="Page Navigation">
<ul class="list-inline text-center mb-0">
{{--上一页开始--}}
@if ($paginator->onFirstPage())
<li class="list-inline-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
<a
class="u-pagination-v1__item g-brd-secondary-light-v2 g-brd-primary--hover g-color-gray-dark-v5 g-color-primary--hover g-font-size-12 rounded g-px-15 g-py-5 g-ml-15"
href="javascript:void(0)" rel="prev" aria-label="@lang('pagination.previous')">‹</a>
</li>
@else
<li class="list-inline-item">
<a
class="u-pagination-v1__item g-brd-secondary-light-v2 g-brd-primary--hover g-color-gray-dark-v5 g-color-primary--hover g-font-size-12 rounded g-px-15 g-py-5 g-ml-15"
href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">‹</a>
</li>
@endif
{{--上一页结束--}}
{{--中间页码开始--}}
@foreach ($elements as $element)
{{-- 省略内容开始 --}}
@if (is_string($element))
<li class="list-inline-item">
<span class="g-width-30 g-height-30 g-color-gray-dark-v5 g-font-size-12 rounded g-pa-5">{{ $element }}</span>
</li>
@endif
{{-- 省略内容结束 --}}
{{-- 链接开始 --}}
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<li class="list-inline-item active" aria-current="page">
<a href="javascript:void(0)"
class="active u-pagination-v1__item g-width-30 g-height-30 g-brd-secondary-light-v2 g-brd-primary--active g-color-white g-bg-primary--active g-font-size-12 rounded g-pa-5">{{ $page }}</a>
</li>
@else
<li class="list-inline-item">
<a
class="u-pagination-v1__item g-width-30 g-height-30 g-brd-transparent g-brd-primary--hover g-brd-primary--active g-color-secondary-dark-v1 g-bg-primary--active g-font-size-12 rounded g-pa-5"
href="{{ $url }}">{{ $page }}</a>
</li>
@endif
@endforeach
@endif
{{-- 链接结束 --}}
@endforeach
{{--中间页码结束--}}
{{--下一页开始--}}
@if ($paginator->hasMorePages())
<li class="list-inline-item">
<a
class="u-pagination-v1__item g-brd-secondary-light-v2 g-brd-primary--hover g-color-gray-dark-v5 g-color-primary--hover g-font-size-12 rounded g-px-15 g-py-5 g-ml-15"
href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">›</a>
</li>
@else
<li class="list-inline-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
<a
class="u-pagination-v1__item g-brd-secondary-light-v2 g-brd-primary--hover g-color-gray-dark-v5 g-color-primary--hover g-font-size-12 rounded g-px-15 g-py-5 g-ml-15"
href="javascript:void(0)" rel="next" aria-label="@lang('pagination.next')">›</a>
</li>
@endif
{{--下一页结束--}}
</ul>
</nav>
@endif