Laravel自定义分页样式

    xiaoxiao2023-03-24  2

    原文地址:这里写链接内容 参考地址:这里写链接内容


    Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义分页。其实 Laravel 的分页组件是非常的灵活,可以通过几种方法去实现我们的需求。


    我们可以从 Model 抽象类看到通过使用 Illuminate\Database\Query\Builder 可以查找出paginate 、simplePaginate的实现。然后直接查看 Illuminate\Pagination\BootstrapThreePaginater 可以查找到 render 方法。这方法就是输出 分页组件 默认的 html。 进一步,可以看到simplePaginate 通过 Illuminate\Pagination\SimpleBootstrapThreePaginater 继承 Illuminate\Pagination\BootstrapThreePaginater 并对 render 方法进行重写,由此可见,我们可以通过继承 BootstrapThreePaginater 类并对 render 方法进行重写,就可以自定义分页的样式了。

    方法一:通过继承

    通过替换默认的生成类来修改分页的自定义样式:替换 laravel 分页组件默认生成的模板 出自 Inspirer(https://www.insp.top)。

    方法二:通过视图

    该方法主要通过利用 Laravel 提供的方法来实现,主要用到 currentPage()、url( $page )、lastPage()。

    第一步

    在需要调用分页的视图中引入 分页视图 ($data 所指的是分页数据,将它传去分页视图):

    @include('pagination.default', ['paginator' => $data]) // $data指的是你传到模板界面的数据 // $data = Article::paginate(10);

    第二步

    利用通过 第一步 传递过来的 $data , 如何去利用呢? 在 resources/views 目录下创建 pagination 目录,并创建一个视图default.blade.php 。添加一下代码:

    <div class="pagination"> <ul> <li class="previous {{ ($paginator->currentPage() == 1) ? ' disabled' : '' }}"> <a href="{{ $paginator->url(1) }}"><i class="chevron left icon"></i></a> </li> @for ($i = 1; $i <= $paginator->lastPage(); $i++) <li class="{{ ($paginator->currentPage() == $i) ? ' active' : '' }}"> <a href="{{ $paginator->url($i) }}">{{ $i }}</a> </li> @endfor <li class="next {{ ($paginator->currentPage() == $paginator->lastPage()) ? ' disabled' : '' }}"> <a href="{{ $paginator->url($paginator->currentPage()+1) }}"> <i class="chevron right icon"></i> </a> </li> </ul> </div>

    $paginator->currentPage():获取当前页

    $paginator->lastPage():获取尾页

    $paginator->url($page):获取页码的URL

    自定义分页样式,可以通过以上方法实现,当然个人建议还是用 方法一 吧,因为方法二 跟写原生没什么区别。

    转载请注明原文地址: https://ju.6miu.com/read-1201224.html
    最新回复(0)