laravel 自定义分页样式


第一步将 创建分页视图资源

自定义分页视图的最简单方法是使用以下命令将其导出到目录中

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')">&lsaquo;</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')">&lsaquo;</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')">&rsaquo;</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')">&rsaquo;</a>
        </li>
      @endif
      {{--下一页结束--}}
    </ul>
  </nav>
@endif

作者介绍

Image Description

zfajax舫

小时候的梦想是当宇航员,长大的梦想是在北京买套90㎡房的小站长、自媒体人,2014年毕业,后从事过网站开发搭建工作;2016年,创建了张舫博客;20015-至今在北京工作(微信:a7983310)

评论列表

还没有人评论,抢占前排沙发

发表评论

关于作者

Image Description

zfajax舫

小时候的梦想是当宇航员,长大的梦想是在北京买套90㎡房的小站长、自媒体人,2014年毕业,后从事过网站开发搭建工作;2016年,创建了张舫博客;20015-至今在北京工作(微信:a7983310)

关注作者

Social Links

定制项目外包

Unit 25 Suite 3, 925 Prospect PI,
Beach Resort, 23001

手机号码

18600004319