ThinkPHP完美实现分页和美化

先上效果图,突然发现和B站上一样

IndexController.class.php代码如下

public function index(){
       $m=M('Info');       
       $count = $m->where($where)->count();
       $pageCount = 10;//每页显示数量
       $page = new \Think\Page($count , $pageCount);
       $page->parameter = $row; //此处的row是数组，为了传递查询条件
       $page->setConfig('header','条留言');
       $page->setConfig('first','首页');
       $page->setConfig('prev','上一页');
       $page->setConfig('next','下一页');
       $page->setConfig('last','尾页');
       $page->setConfig('theme','%FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END%<div id="pageTips">第 '.I('p',1).' 页/共 %TOTAL_PAGE% 页 ( '.$pageCount.' 条/页 共 %TOTAL_ROW% 条信息)</div>');
       $show = $page->show();
       $list = $m->where($where)->order('id desc')->limit($page->firstRow.','.$page->listRows)->select();
       $this->assign('infoList',$list);
       $this->assign('show',$show);
       $this->display();   
    }

index.html代码如下

            <table class="table table-hover table-striped" id="table">
                    <tr class="danger">
                        <th>类别</th>
                        <th>信息标题</th>
                        <th>物品类型</th>
                        <th>遗失/拾物时间</th>
                        <th>遗失/拾物地点</th>
                        <th >发布时间</th>
                    </tr>
                    <foreach name="infoList" item='vo'>

                    <tr >
                        <td>{$vo.info_type}</td>
                        <td>{$vo.info_title}</td>
                        <td>{$vo.thing_type}</td>
                        <td>{$vo.info_time}</td>
                        <td>{$vo.info_place}</td>
                        <td>{$vo.create_time}</td>
                    </tr>
                    </foreach>
            </table>

             <div class="page">
                    <ul>
                        {$show}
                    </ul>
            </div>

css代码如下

/* start 分页样式 */

.page{
    overflow:hidden;
    margin:50px 0 50px 100px;;
}

.page ul a,.page ul span{
    float:left;
    display:inline-block;
    padding: 0 17px;
    height:40px;
    width:auto;
    border:1px solid #DDDDDD;
    border-radius: 4px;
    background:#fff;
    text-align:center;
    line-height:40px;
    margin-right:10px;
    font-family: "microsoft yahei" simhei sans-serif;
    color:#7d7d7d;
}

.page ul a:hover{
    background:#337AB7;
    color:#fff;
    text-decoration:none;
}

.page ul span.current{
    background: #337AB7;
    color:#fff;
}


.page ul a:first,.page ul a:last{
    float:left;
    display:inline-block;
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgb(215, 215, 217);
    text-align:center;
    line-height:40px;
    margin-right:10px;
    font-family: "microsoft yahei" simhei sans-serif;
}

#pageTips {
    float:right;
}
/* end 分页样式 */

---

本文地址：http://liuyanzhao.com/3485.html

转载请注明