网站开发(十五)文章分页技术

来源:互联网 发布:淘宝虚拟网店要不要钱 编辑:程序博客网 时间:2024/06/03 22:46

一、什么是分页技术

分页,是一种将所有数据分段展示给用户的技术.用户每次看到的不是全部数据,而是其中的一部分,如果在其中没有找到自习自己想要的内容,用户可以通过制定页码或是翻页的方式转换可见内容,直到找到自己想要的内容为止.其实这和我们阅读书籍很类似.

效果如下

这里写图片描述


二、 步骤(利用thinkphp的api)

1、进入Home下的index控制器IndexController.class.php,在index函数中注释掉其中的文章内容循环代码,加上文章分页代码

文章分页代码如下(thinkphp的api)

//文章分页        $first=D('first');//数据表名称        $count=$first->count();// 查询满足要求的总记录数        $Page=new\Think\Page($count,2);// 实例化分页类 传入总记录数和每页显示的记录数(2),2代表一页显示2篇文章        $show=$Page->show();// 分页显示输出        $list=$first->limit($Page->firstRow.','.$Page->listRows)->select();// 进行分页数据查询 注意limit方法的参数要使用Page类的属性        $this->assign('list',$list);// 赋值数据集        $this->assign('page',$show);// 赋值分页输出

这里写图片描述


2、修改Home/View/Index下的index.html代码中的volist的name属性,将原本的firsts改成list(因为控制器中文章内容循环代码已经注释了所以这里的firsts失效,volist对应的name对应文章分页代码中的赋值数据集)如图

这里写图片描述

对应index控制器中

这里写图片描述


3、加入分页页码的div和样式

进入Home/View/Index下的index.html加入分页页码的div和样式

样式写在title下面

<style type="text/css">      .b-page {    background: #fff;    box-shadow: 0px 1px 2px 0px #E2E2E2;      }      .page {          width: 95%;          padding: 30px 15px;          background: #FFF;          text-align: right;          overflow: hidden;      }        .page .first,        .page .prev,        .page .current,        .page .num,        .page .current,        .page .next,        .page .end {            padding: 8px 16px;            margin: 0px 5px;            display: inline-block;            color: #008CBA;            border: 1px solid #F2F2F2;            border-radius: 5px;        }        .page .first:hover,        .page .prev:hover,        .page .current:hover,        .page .num:hover,        .page .current:hover,        .page .next:hover,        .page .end:hover {            text-decoration: none;            background: #F8F5F5;        }        .page .current {            background-color: #008CBA;            color: #FFF;            border-radius: 5px;            border: 1px solid #008CBA;        }        .page .current:hover {            text-decoration: none;            background: #008CBA;        }        .page .not-allowed {            cursor: not-allowed;        }    </style>

这里写图片描述

div写在volist下面

    <div class="list page b-page">        {$page}        </div>    </div>

这里写图片描述

这篇文章是基于thinkphp的分页技术