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