tp3 分頁樣式
控制器
<?php namespace Home\Controller; use Think\Controller; class ListController extends BaseController { public function index(){ $cateid=I('cate_id'); $article = D('article'); // 例項化User物件 $count=$article->where("ar_cateid=$cateid")->count(); $Page = new \Think\Page($count,2);// $Page->setConfig('prev', '上一頁'); $Page->setConfig('next', '下一頁'); $show = $Page->show();// 分頁顯示輸出 $list = $article->where("ar_cateid=$cateid")->limit($Page->firstRow.','.$Page->listRows)->select(); $this->assign('list',$list);// 賦值資料集 $this->assign('page',$show);// 賦值分頁輸出 $this->display(); } }
css
.pagination ul { display: inline-block; margin-bottom: 0; margin-left: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05); box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .pagination ul li { display: inline; }
.pagination ul li.rows { line-height: 30px; padding-left: 5px; } .pagination ul li.rows b{color: #f00}
.pagination ul li a, .pagination ul li span { float: left; padding: 4px 12px; line-height: 20px; text-decoration: none; background-color: #fff; background: url('../images/bottom_bg.png') 0px 0px; border: 1px solid #d3dbde; /*border-left-width: 0;*/ margin-left: 2px; color: #08c; } .pagination ul li a:hover{ color: red; background: #0088cc; } .pagination ul li.first-child a, .pagination ul li.first-child span { border-left-width: 1px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-topleft: 3px; } .pagination ul .disabled span, .pagination ul .disabled a, .pagination ul .disabled a:hover { color: #999; cursor: default; background-color: transparent; } .pagination ul .active a, .pagination ul .active span { color: #999; cursor: default; } .pagination ul li a:hover, .pagination ul .active a, .pagination ul .active span { background-color: #f0c040; } .pagination ul li.last-child a, .pagination ul li.last-child span { -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; }
.pagination ul li.current a{color: #f00 ;font-weight: bold; background: #ddd}
檢視
<div class="pagination"> <ul> <li>{$page}</li> </ul> </div>