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
相关文章
相关标签/搜索