本文实例讲述了Laravel框架自定义分页样式操作，分享给大家供大家参考，具体如下：

操作步骤如下:

(1)  对应public/css/paging.css 文件建立分页样式.

(2)  控制器查出分页数据使用 paginate函数进行分页处理.(禁止使用group by处理查询).

(3) 对应视图引入分页样式.

例如: paging.css 样式文件代码(复制即可用,实际操作过)如下

1. #pull_right{ 
2.   text-align:center; 
3. } 
4. .pull-right { 
5.   /*float: left!important;*/ 
6. } 
7. .pagination { 
8.   display: inline-block; 
9.   padding-left: 0; 
10.   margin: 20px 0; 
11.   border-radius: 4px; 
12. } 
13. .pagination > li { 
14.   display: inline; 
15. } 
16. .pagination > li > a, 
17. .pagination > li > span { 
18.   position: relative; 
19.   float: left; 
20.   padding: 6px 12px; 
21.   margin-left: -1px; 
22.   line-height: 1.42857143; 
23.   color: #428bca; 
24.   text-decoration: none; 
25.   background-color: #fff; 
26.   border: 1px solid #ddd; 
27. } 
28. .pagination > li:first-child > a, 
29. .pagination > li:first-child > span { 
30.   margin-left: 0; 
31.   border-top-left-radius: 4px; 
32.   border-bottom-left-radius: 4px; 
33. } 
34. .pagination > li:last-child > a, 
35. .pagination > li:last-child > span { 
36.   border-top-right-radius: 4px; 
37.   border-bottom-right-radius: 4px; 
38. } 
39. .pagination > li > a:hover, 
40. .pagination > li > span:hover, 
41. .pagination > li > a:focus, 
42. .pagination > li > span:focus { 
43.   color: #2a6496; 
44.   background-color: #eee; 
45.   border-color: #ddd; 
46. } 
47. .pagination > .active > a, 
48. .pagination > .active > span, 
49. .pagination > .active > a:hover, 
50. .pagination > .active > span:hover, 
51. .pagination > .active > a:focus, 
52. .pagination > .active > span:focus { 
53.   z-index: 2; 
54.   color: #fff; 
55.   cursor: default; 
56.   background-color: #428bca; 
57.   border-color: #428bca; 
58. } 
59. .pagination > .disabled > span, 
60. .pagination > .disabled > span:hover, 
61. .pagination > .disabled > span:focus, 
62. .pagination > .disabled > a, 
63. .pagination > .disabled > a:hover, 
64. .pagination > .disabled > a:focus { 
65.   color: #777; 
66.   cursor: not-allowed; 
67.   background-color: #fff; 
68.   border-color: #ddd; 
69. } 
70. .clear{ 
71.   clear: both; 
72. } 

例如:TestCntroller.php 控制器示例写法

1. <?php 
2. namespace App\Http\Controllers; 
3. use Illuminate\Support\Facades\DB; 
4. use App\Http\Controllers\Controller; 
5. class TestController extends Controller{ 
6.   /** 
7.    * 测试数据 
8.    */ 
9.   public function index() 
10.   { 
11.     $test = DB::table('test')->paginate(5); 
12.     return view('index', ['test' => $test]); 
13.   } 
14. } 

例如: list.blade.php 视图文件代码示例写法

1. <!--用于引用css--> 
2. <link rel="stylesheet" type="text/css" href="{{asset('css/paging.css')}}" rel="external nofollow" /> 
3. <div class="container"> 
4.   <!--查数据--> 
5.   @foreach ($test as $value) 
6.     {{ $value->id }} 
7.   @endforeach 
8. </div> 
9. <div id="pull_right"> 
10.   <!--分页写法--> 
11.   <div class="pull-right"> 
12.     {{ $test->render() }} 
13.   </div> 
14. </div> 

样式如下图:

Tags: Laravel自定义分页

分享到：