laravel自定义分页模版

2019独角兽企业重金招聘Python工程师标准>>>

laravel自身paginate()等分页的样式比较简单，而且生成的html只支持 Bootstrap CSS。

1、简单粗暴的修改

laravel5.4里面分页样式模版在目录与文件是：           
 \vendor\laravel\framework\src\Illuminate\Pagination\resources\views\default.blade.php
若想简单粗暴修改模版，直接修改default.blade.php的代码即可。

2、替换默认模版

本人不太愿意过多的去修改框架自身的代码。选择新建分页模版。

（1）创建替换blade模板

在 resources\views 目录创建分页模版。本人是再 resources\views\layouts 创建了 page.blade.php模版

（2）指定 统一默认模版

在 app\Providers\AppServiceProvider.php 的 boot() 方法里，添加如下代码：
\Illuminate\Pagination\LengthAwarePaginator::defaultView('layouts.page'); 
// 这里layouts.page是你分页模版的路径

刷新页面，新模版即生效，而且也不需要你在前端页面指定模版。直接在其它blade里面执行 
{{ $xxx->links() }} 即可调用成功 。($xxx为你传递到页面的数据，如paginate() 查询后传递的数值 )

（3）单个指定分页模版

在前端blade.php里面，也可以单独指定模版。假如分页模版文件为：
 resources\views\layouts\page.blade.php
只需在前端x.blade.php加上 {{ $xxx->links('layouts.page') }} 即可

自己用的是layui 前端框架，其分页模版代码如下，方便自己下次copy

@if ($paginator->hasPages())
<div id="page">
 <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1">
         {{-- Previous Page Link --}}
     @if ($paginator->onFirstPage())
         <a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
     @else
         <a href="{{ $paginator->previousPageUrl() }}" class="layui-laypage-prev" data-page="{{ $paginator->currentPage() -1 }}">上一页</a>
     @endif

         {{-- Pagination Elements --}}
         @foreach ($elements as $element)

             {{-- 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 href="{{ $url }}" data-page="{{ $page }}">{{ $page }}</a>
                     @endif
                 @endforeach
             @endif
         @endforeach

         {{-- Next Page Link --}}
         @if ($paginator->hasMorePages())
             <a href="{{ $paginator->nextPageUrl() }}" class="layui-laypage-next" data-page="{{ $page }}">下一页</a>
         @else
             <a href="javascript:;" class="layui-laypage-next layui-disabled" data-page="{{ $page }}">下一页</a>
         @endif
         <span class="layui-laypage-count">共 {{ $paginator->total() }} 条</span>
         <span class="layui-laypage-skip">到第
             <input type="text" min="1" name="page" value="1" class="layui-input" id="inputpage">页
             <a class="layui-laypage-btn" onclick="set_pageurl()" href = "javascript:;" >确定</a>
         </span>
     </div>
 </div>
 <script type="text/javascript">
     function set_pageurl(){
         var jump_page = document.getElementById('inputpage').value;
         var search = window.location.search
         if (search.length > 0){
             if (search.indexOf('page') > -1){
                 jump_url = search.replace(/page=\d/,'page=' + jump_page)
             } else {
                 jump_url = search + '&page=' + jump_page;
             }
         } else {
             jump_url = '?page='+ jump_page;
         }
         window.location.href = jump_url
     }
 </script>
@endif

转载于:https://my.oschina.net/u/3403514/blog/1525149