唐长老网络

首页 经验教程Laravel教程正文

laravel layui 分页自定义样式

唐长老网络2020-05-27395

如果使用 laravel  默认的   paginate  在layui的样式 :

image.png


在laravel 页码输出中 可以自定义 模板

image.png

自定义 样式:

@if ($paginator->hasPages())
    <div class="layui-card-body">
        <div id="test-laypage-demo0">
            <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
                {{-- Previous Page Link --}}
                @if ($paginator->onFirstPage())
                    <a class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                        首页
                    </a>
                @else
                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev"
                       aria-label="@lang('pagination.previous')"> 上一页</a>
                @endif

                {{-- Pagination Elements --}}
                @foreach ($elements as $element)
                    {{-- "Three Dots" Separator --}}
                    @if (is_string($element))
                        <a class="page-item disabled" aria-disabled="true">{{ $element }}</a>
                    @endif

                    {{-- Array Of Links --}}
                    @if (is_array($element))
                        @foreach ($element as $page => $url)
                            @if ($page == $paginator->currentPage())
                                <span class="layui-laypage-curr" >
                                <em class="layui-laypage-em"></em>
                                 <em>{{ $page }}</em>
                                 </span>
                            @else
                                <a class="" href="{{ $url }}">{{ $page }}</a>
                            @endif
                        @endforeach
                    @endif
                @endforeach

                {{-- Next Page Link --}}
                @if ($paginator->hasMorePages())
                    <a class="layui-laypage-next" href="{{ $paginator->nextPageUrl() }}" rel="next"
                       aria-label="@lang('pagination.next')">下一页</a>
                @else
                    <a class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                        尾页
                    </a>
                @endif
            </div>
        </div>
    </div>
@endif


最终效果

image.png

上一篇:CSGO开箱,CSGO开箱网站,CSGO开箱导航,CSGO开箱网

下一篇:环氧地坪,成都地坪,成都环氧地坪

最新评论

猜你还喜欢这些...

服务热线

13518194439

qrcode

扫一扫二维码,访问手机版