laravel 自定义分页样式
文章目的实现laravel分页样式的修改:(样式有点丑)
以laravel的默认表users表为例,插入100条数据
$arr = [];
for($i=0;$i<100;$i++){$arr[] = ['name'=>'NAME_'.$i,'email'=>"email@{$i}.com",'password'=>$i,'created_at'=>date('Y-m-d H:i:s'),'updated_at'=>date('Y-m-d H:i:s')];}DB::table('users')->insert($arr);
查询数据渲染到模板
public function test(){$users = DB::table('users')->paginate(10);return view('paginate',['users'=>$users]);}
新建paginate.blade.php文件
<!DOCTYPE html>
<html>
<head><title>Home</title><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>table td,th {border: 1px solid #e5e5e5;padding: 8px;}.table{width: 100%;margin-left: 20%;}</style>
</head>
<body><div ><div class="table"><h1>用户列表</h1><table><thead><tr><th>序号</th><th>名称</th><th>email</th><th>创建时间</th><th>修改时间</th></tr></thead><tbody>@foreach($users as $user)<tr><td>{{$loop->iteration}}</td><td>{{$user->name}}</td><td>{{$user->email}}</td><td>{{$user->created_at}}</td><td>{{$user->updated_at}}</td></tr>@endforeach</tbody></table>{{$users -> links()}}</div>
</div></body>
</html>
此时的分页为laravel默认的效果
使用 vendor:publish 命令导出视图文件到resources/views/vendor 目录
php artisan vendor:publish --tag=laravel-pagination
生成多种分页样式模板文件
此时默认使用pagination文件的第一个分页样式 bootstrap-4.blade.php
Paginator::defaultView(‘vendor.pagination.default’); 可以切换其他的样式
修改箭头符号为 上一页
修改后效果:
加一个跳转页数的输入框
分页blade的代码:
<style>.pagination select {width: 110px;margin-top: -24px;}.pagination li{display: inline-block;}.pagination input{width: 50px;}
</style>@if ($paginator->hasPages())<ul class="pagination">{{--添加分页数量选择--}}<li class="page-item"><select class="form-control" name="perPage" ><option value="10" selected>10条/页</option><option value="20" selected>20条/页</option><option value="50" selected>50条/页</option><option value="100" selected>100条/页</option></select></li>{{-- Previous Page Link --}}@if ($paginator->onFirstPage()){{--<li class="page-item disabled"><span class="page-link">‹</span></li>--}}<li class="page-item disabled"><span class="page-link">上一页</span></li>@else{{--<li class="page-item"><a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">‹</a></li>--}}<li class="page-item"><a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">上一页</a></li>@endif{{-- Pagination Elements --}}@foreach ($elements as $element){{-- "Three Dots" Separator --}}@if (is_string($element))<li class="page-item disabled"><span class="page-link">{{ $element }}</span></li>@endif{{-- Array Of Links --}}@if (is_array($element))@foreach ($element as $page => $url)@if ($page == $paginator->currentPage())<li class="page-item active"><span class="page-link">{{ $page }}</span></li>@else<li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>@endif@endforeach@endif@endforeach{{-- Next Page Link --}}@if ($paginator->hasMorePages()){{--<li class="page-item"><a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">›</a></li>--}}<li class="page-item"><a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">下一页</a></li>@else{{--<li class="page-item disabled"><span class="page-link">›</span></li>--}}<li class="page-item disabled"><span class="page-link">下一页</span></li>@endif<li><strong> 跳转到:</strong></li><li><input class="form-control"></li><li><strong> 页</strong></li></ul>
@endif
附:
每个分页器实例都可以通过以下方法提供更多分页信息:
$results->count()
$results->currentPage()
$results->firstItem()
$results->hasMorePages()
$results->lastItem()
$results->lastPage() (使用simplePaginate 时无效)
$results->nextPageUrl()
$results->perPage()
$results->previousPageUrl()
$results->total() (使用simplePaginate 时无效)
$results->url($page)
laravel 自定义分页样式相关推荐
- Laravel自定义分页样式
Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义分页.其实 Laravel 的分页组件是 ...
- php 分页样式定制,Laravel自定义分页样式
Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义分页.其实 Laravel 的分页组件是 ...
- Laravel自定义分页样式 1
Laravel中提供非常简便的分页功能,只要在页面上使用<?php echo $order->render(); ?> 即可,但是自带的分页样式是在是不敢恭维.后来试着找了下源码,在 ...
- 上接扩展GridView控件(10) - 自定义分页样式
5.重写OnRowCreated以实现自定义分页样式 /// <summary> /// OnRowCreated // ...
- h5分页样式 css,【前端技术】Quasar Table: 自定义分页样式
说点什么 一个管理端的系统,最常用的是数据表格及分页. 这里我记录一下使用QTable 数据表及QPagination组件来实现想要的数据表格及分页的过程. 可直接跳至文章末尾,看实现效果:传送门. ...
- GridView自定义分页样式(上一页,下一页,到第几页)(新手教程)
今天要为网站做一个文章列表,发现GridView的分页样式很难看,于是结合网上的例子,自己做了一个.不是很美观,不过还是很实用的,先看下效果吧,如图(1).演示地址http://www.veryam. ...
- Pbootcms自定义分页样式,适用于多种环境
系统自带分页效果 pbootcms 程序自带的分页样式为: {page:bar} ,时间长了发现难以满足不同网站仿制时分页的要求,系统自带标签如下,可以灵活搭配使用: {page:bar} 系 ...
- element ui——Pagination 自定义分页样式
我们可以看到,element ui Pagination分页默认样式 直接显示 首页 - 中间页 - 末页,但当项目中数据量过大时,用户直接点击最后一页 可能会导致后端elk崩溃.项目最后要求 不能把 ...
- dedecms如何自定义分页样式
找到include/arc.listview.class.php,在里面有静态和动态两种显示分页样式的方法,找到具体代码,根据自己需求修改,就可以了. 然后在前端就只需要如下代码:{dede:page ...
- GridView分页的实现以及自定义分页样式功能实例
http://www.jb51.net/article/39677.htm GridView分页的实现 要在GridView中加入 //实现分页 AllowPaging="true" ...
最新文章
- java中的分页 效率考虑_面试官:数据量很大,分页查询很慢,有什么优化方案?...
- Java线程之Synchronized用法
- 多个项目怎么配置到服务器上,多个项目怎么配置到服务器
- DDoS deflate–简单解决VPS被DDOS/CC攻击
- How do I get the lowest value of all the non zero value pixels?
- 利用SOS扩展库进入高阶.NET6程序的调试
- curaengine linux编译,Cura源码在Ubuntu15.04上编译脚本(成功)
- python deepcopy_轻轻吐槽下python的deepcopy居然一点不deep
- 【maven】mvn deploy 报错 Failed to deploy artifacts: Could not transfer artifact
- vue-router路由懒加载(解决vue项目首次加载慢)
- android 日历_适用于Android的十大最佳日历应用
- 【R语言 南丁格尔玫瑰图绘制】
- nyoj145 聪明的小柯
- Thinkphp5 谷歌验证
- ElasticSearch中文分词,看这一篇就够了
- 广州首发跨境电商“全球卖”-成都扬帆牧哲跨境电商
- 2秒下一部4K电影 挥别蹭网下片时代
- 远程校准频率标准与数字时钟的解决方案
- Netty源码实战(十) - 性能优化
- 微信公众号开发 接口配置信息 配置失败