当前位置:首页 > CMS教程 > 其它CMS > 列表

Laravel框架自定义分页样式操作示例

发布:smiling 来源: PHP粉丝网  添加日期:2022-02-08 09:02:44 浏览: 评论:0 

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

操作步骤如下:

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

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

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

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

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

例如: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.   } 

例如: 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> 

样式如下图:

Laravel自定义分页

Tags: Laravel自定义分页

分享到: