Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义分页。其实 Laravel 的分页组件是非常的灵活,可以通过几种方法去实现我们的需求。

我们可以从 Model 抽象类看到通过使用 Illuminate\Database\Query\Builder 可以查找出paginatesimplePaginate的实现。然后直接查看 Illuminate\Pagination\BootstrapThreePaginater 可以查找到 render 方法。这方法就是输出 分页组件 默认的 html。

进一步,可以看到simplePaginate 通过 Illuminate\Pagination\SimpleBootstrapThreePaginater 继承 Illuminate\Pagination\BootstrapThreePaginater 并对 render 方法进行重写,由此可见,我们可以通过继承 BootstrapThreePaginater 类并对 render 方法进行重写,就可以自定义分页的样式了。

方法一:通过继承

通过替换默认的生成类来修改分页的自定义样式:替换 laravel 分页组件默认生成的模板 出自 Inspirer(https://www.insp.top)。


方法二:通过视图

该方法主要通过利用 Laravel 提供的方法来实现,主要用到 currentPage()url( $page )lastPage()

第一步

在需要调用分页的视图中引入 分页视图 ($data 所指的是分页数据,将它传去分页视图):

@include('pagination.default', ['paginator' => $data])

<br/>

第二步

利用通过 第一步 传递过来的 $data , 如何去利用呢?
resources/views 目录下创建 pagination 目录,并创建一个视图default.blade.php 。添加一下代码:

<div class="pagination"><ul><li class="previous {{ ($paginator->currentPage() == 1) ? ' disabled' : '' }}"><a href="{{ $paginator->url(1) }}"><i class="chevron left icon"></i></a></li>@for ($i = 1; $i <= $paginator->lastPage(); $i++)<li class="{{ ($paginator->currentPage() == $i) ? ' active' : '' }}"><a href="{{ $paginator->url($i) }}">{{ $i }}</a></li>@endfor<li class="next {{ ($paginator->currentPage() == $paginator->lastPage()) ? ' disabled' : '' }}"><a href="{{ $paginator->url($paginator->currentPage()+1) }}"><i class="chevron right icon"></i></a></li></ul>
</div>

$paginator->currentPage():获取当前页

$paginator->lastPage():获取尾页

$paginator->url($page):获取页码的URL

<br/>

最后的效果:

自定义分页样式,可以通过以上方法实现,当然个人建议还是用 方法一 吧,因为方法二 跟写原生没什么区别。

Laravel自定义分页样式相关推荐

  1. php 分页样式定制,Laravel自定义分页样式

    Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义分页.其实 Laravel 的分页组件是 ...

  2. Laravel自定义分页样式 1

    Laravel中提供非常简便的分页功能,只要在页面上使用<?php echo $order->render(); ?> 即可,但是自带的分页样式是在是不敢恭维.后来试着找了下源码,在 ...

  3. 上接扩展GridView控件(10) - 自定义分页样式

    5.重写OnRowCreated以实现自定义分页样式 /// <summary>                  /// OnRowCreated                  // ...

  4. h5分页样式 css,【前端技术】Quasar Table: 自定义分页样式

    说点什么 一个管理端的系统,最常用的是数据表格及分页. 这里我记录一下使用QTable 数据表及QPagination组件来实现想要的数据表格及分页的过程. 可直接跳至文章末尾,看实现效果:传送门. ...

  5. GridView自定义分页样式(上一页,下一页,到第几页)(新手教程)

    今天要为网站做一个文章列表,发现GridView的分页样式很难看,于是结合网上的例子,自己做了一个.不是很美观,不过还是很实用的,先看下效果吧,如图(1).演示地址http://www.veryam. ...

  6. Pbootcms自定义分页样式,适用于多种环境

    系统自带分页效果 pbootcms  程序自带的分页样式为:   {page:bar}  ,时间长了发现难以满足不同网站仿制时分页的要求,系统自带标签如下,可以灵活搭配使用: {page:bar} 系 ...

  7. element ui——Pagination 自定义分页样式

    我们可以看到,element ui Pagination分页默认样式 直接显示 首页 - 中间页 - 末页,但当项目中数据量过大时,用户直接点击最后一页 可能会导致后端elk崩溃.项目最后要求 不能把 ...

  8. dedecms如何自定义分页样式

    找到include/arc.listview.class.php,在里面有静态和动态两种显示分页样式的方法,找到具体代码,根据自己需求修改,就可以了. 然后在前端就只需要如下代码:{dede:page ...

  9. GridView分页的实现以及自定义分页样式功能实例

    http://www.jb51.net/article/39677.htm GridView分页的实现 要在GridView中加入 //实现分页 AllowPaging="true" ...

最新文章

  1. 【DBMS 数据库管理系统】数据库 -> 数据仓库 ( 数据处理类型 | 传统数据库 | 数据库不适用于分析型应用 )
  2. 在ASP.NET中UrlRewrite的实现(能隐藏扩展名)之一
  3. 四、“一场跨越时空持续数世纪的对话”
  4. android手机短信拦截器,垃圾短信退订套路深 手机上装拦截软件是可行方法
  5. DropdownList 赋初始值问题
  6. Rails 应用使用 Capistrano2 部署流程
  7. 自主招生计算机论文,自主招生
  8. /hgfs下无共享文件夹?/mnt下没有hgfs文件夹?vmhgfs-fuse:找不到命令?
  9. china-pub近7日计算机图书排行榜
  10. 面试被问 Go 的map[int64]int64 在 redis 会占多少空间...
  11. deepin20安装mysql-workbench
  12. 不要为了“分库分表”而“分库分表”!
  13. B/S WEB端条码打印系统 斑马条码打印解决方案
  14. 矩阵的逆和矩阵的转置运算公式对比
  15. Halcon视觉框架+车牌识别+汉字识别+颜色识别+20200930
  16. Allegro-PCB导入DXF文件
  17. Contour Processing
  18. 利用word分词来计算文本相似度
  19. AI+视频技术助力保障校园安全,校园智能安防平台该如何建设?
  20. 研华PCI1716L的C#编程

热门文章

  1. 设计模式四:简单工厂
  2. oracle segments,tablespace,and data files
  3. 中国人工智能学会通讯——自然语言处理的十个发展趋势 趋势 4: 语言知识——从人工构建到自动构建...
  4. 前端rem单位的正确使用姿势(转)
  5. 如何在Linux中查看所有正在运行的进程
  6. 深入理解IOC模式及Unity框架
  7. Python学习第三天--数据类型
  8. Apache虚拟主机(转)
  9. Tomexam在线考试系统 2.1
  10. 按键精灵_按键精灵——办公常用脚本集锦