Laravel 自定义分页样式
Posted echo 曦
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Laravel 自定义分页样式相关的知识,希望对你有一定的参考价值。
操作步骤如下:
(1) 对应public/css/paging.css 文件建立分页样式.
(2) 控制器查出分页数据使用 paginate函数进行分页处理.(禁止使用group by处理查询).
(3) 对应视图引入分页样式.
例如: paging.css 样式文件代码(复制即可用,实际操作过)如下
#pull_right{
text-align:center;
}
.pull-right {
/*float: left!important;*/
}
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination > li {
display: inline;
}
.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #428bca;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
color: #2a6496;
background-color: #eee;
border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
z-index: 2;
color: #fff;
cursor: default;
background-color: #428bca;
border-color: #428bca;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: #777;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}
.clear{
clear: both;
}
例如:TestCntroller.php 控制器示例写法
<?php namespace App\\Http\\Controllers; use Illuminate\\Support\\Facades\\DB; use App\\Http\\Controllers\\Controller; class TestController extends Controller{ /** * 测试数据 */ public function index() { $test = DB::table(\'test\')->paginate(5); return view(\'index\', [\'test\' => $test]); } }
例如: list.blade.php 视图文件代码示例写法
<!--用于引用css--> <link rel="stylesheet" type="text/css" href="{{asset(\'css/paging.css\')}}"/> <div class="container"> <!--查数据--> @foreach ($test as $value) {{ $value->id }} @endforeach </div> <div id="pull_right"> <!--分页写法--> <div class="pull-right"> {{ $test->render() }} </div> </div>
样式如下图:
以上是关于Laravel 自定义分页样式的主要内容,如果未能解决你的问题,请参考以下文章