laravel自定義分頁模版

laravel自身paginate()等分頁的樣式比較簡單,並且生成的html只支持 Bootstrap CSS。javascript

一、簡單粗暴的修改php

laravel5.4裏面分頁樣式模版在目錄與文件是:           
 \vendor\laravel\framework\src\Illuminate\Pagination\resources\views\default.blade.php
若想簡單粗暴修改模版,直接修改default.blade.php的代碼便可。

二、替換默認模版html

本人不太願意過多的去修改框架自身的代碼。選擇新建分頁模版。

(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
相關文章
相關標籤/搜索