ThinkPHP完美实现分页和美化

avatar 2016年08月09日18:34:18 0 3125 views
博主分享免费Java教学视频，B站账号：Java刘哥
先上效果图,突然发现和B站上一样 这里写图片描述 IndexController.class.php代码如下
  1. public function index(){
  2.        $m=M('Info');
  3.        $count = $m->where($where)->count();
  4.        $pageCount = 10;//每页显示数量
  5.        $page = new \Think\Page($count , $pageCount);
  6.        $page->parameter = $row; //此处的row是数组，为了传递查询条件
  7.        $page->setConfig('header','条留言');
  8.        $page->setConfig('first','首页');
  9.        $page->setConfig('prev','上一页');
  10.        $page->setConfig('next','下一页');
  11.        $page->setConfig('last','尾页');
  12.        $page->setConfig('theme','%FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END%<div id="pageTips">第 '.I('p',1).' 页/共 %TOTAL_PAGE% 页 ( '.$pageCount.' 条/页 共 %TOTAL_ROW% 条信息)</div>');
  13.        $show = $page->show();
  14.        $list = $m->where($where)->order('id desc')->limit($page->firstRow.','.$page->listRows)->select();
  15.        $this->assign('infoList',$list);
  16.        $this->assign('show',$show);
  17.        $this->display();
  18.     }
index.html代码如下
  1. <table class="table table-hover table-striped" id="table">
  2.                     <tr class="danger">
  3.                         <th>类别</th>
  4.                         <th>信息标题</th>
  5.                         <th>物品类型</th>
  6.                         <th>遗失/拾物时间</th>
  7.                         <th>遗失/拾物地点</th>
  8.                         <th >发布时间</th>
  9.                     </tr>
  10.                     <foreach name="infoList" item='vo'>
  12.                     <tr >
  13.                         <td>{$vo.info_type}</td>
  14.                         <td>{$vo.info_title}</td>
  15.                         <td>{$vo.thing_type}</td>
  16.                         <td>{$vo.info_time}</td>
  17.                         <td>{$vo.info_place}</td>
  18.                         <td>{$vo.create_time}</td>
  19.                     </tr>
  20.                     </foreach>
  21.             </table>
  23.              <div class="page">
  24.                     <ul>
  25.                         {$show}
  26.                     </ul>
  27.             </div>
css代码如下
  1. /* start 分页样式 */
  3. .page{
  4.     overflow:hidden;
  5.     margin:50px 0 50px 100px;;
  6. }
  8. .page ul a,.page ul span{
  9.     float:left;
  10.     display:inline-block;
  11.     padding: 0 17px;
  12.     height:40px;
  13.     width:auto;
  14.     border:1px solid #DDDDDD;
  15.     border-radius: 4px;
  16.     background:#fff;
  17.     text-align:center;
  18.     line-height:40px;
  19.     margin-right:10px;
  20.     font-family: "microsoft yahei" simhei sans-serif;
  21.     color:#7d7d7d;
  22. }
  24. .page ul a:hover{
  25.     background:#337AB7;
  26.     color:#fff;
  27.     text-decoration:none;
  28. }
  30. .page ul span.current{
  31.     background: #337AB7;
  32.     color:#fff;
  33. }
  36. .page ul a:first,.page ul a:last{
  37.     float:left;
  38.     display:inline-block;
  39.     width:40px;
  40.     height:40px;
  41.     border-radius:50%;
  42.     background:rgb(215, 215, 217);
  43.     text-align:center;
  44.     line-height:40px;
  45.     margin-right:10px;
  46.     font-family: "microsoft yahei" simhei sans-serif;
  47. }
  49. #pageTips {
  50.     float:rightright;
  51. }
  52. /* end 分页样式 */
    本文地址：http://liuyanzhao.com/3485.html 转载请注明  
历史上的今天
八月
09日
  • 微信
  • 交流学习，有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享，问题解决，技术交流。群号：590480292
  • weinxin
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0