1.前言
网页的分页效果以前一直是困扰我很久的问题,现在想想,其实也不难,一个网页要实现分页,无非就是主要通过两部分来实现。
- 通过传递过来的页码去数据库查找指定的记录。(控制器中实现)
- 通过传递过来的页码和总记录数,生成相应的翻页导航。(page类实现)
2.实现方式(thinkphp)
2.1.引入分页类
vendor('page.page_class');
2-2.配置分页信息
$curpage = empty($_GET['page']) ? 1 : $_GET['page']; //当前的页,还应该处理非数字的情况
$pagesize = 10; //每页显示的数据
$total = count(Db::table('pd_partner')->select()); //列表总数
$pagemode =2; //分页模式
2-3.保持分页信息与数据同步
$partnerlist = Db::table('pd_partner')->order('partner_id')->limit(($curpage-1)*$pagesize,$pagesize)->select();
2-4.视图根据控制器传递过来的信息,实例化一个分页导航对象
<div class="showPage">
<php
if ($total > $showrow) {
$page = new page($total, $pagesize, $curpage, $url, 1);
echo $page->myde_write();
}
>
</div>
2.5.为保证样式好看,前端需要为分类内对象添加样式
<style type="text/css">
p{margin:0}
#page{
height:40px;
padding:20px 0px;
}
#page a{
display:block;
float:left;
margin-right:10px;
padding:2px 12px;
height:24px;
border:1px #cccccc solid;
background:#fff;
text-decoration:none;
color:#808080;
font-size:12px;
line-height:24px;
}
#page a:hover{
color:#077ee3;
border:1px #077ee3 solid;
}
#page a.cur{
border:none;
background:#077ee3;
color:#fff;
}
#page p{
float:left;
padding:2px 12px;
font-size:12px;
height:24px;
line-height:24px;
color:#bbb;
border:1px #ccc solid;
background:#fcfcfc;
margin-right:8px;
}
#page p.pageRemark{
border-style:none;
background:none;
margin-right:0px;
padding:4px 0px;
color:#666;
}
#page p.pageRemark b{
color:red;
}
#page p.pageEllipsis{
border-style:none;
background:none;
padding:4px 0px;
color:#808080;
}
.dates li {font-size: 14px;margin:20px 0}
.dates li span{float:right}
</style>
3.原理分析
3.1.要先配置分页信息
因为分页信息中有curpage和pagesize信息,这些都是要实现同步数据必须的。
4.demo源码下载
链接:https://share.weiyun.com/3d474d95c81b0cb4dde6b7c3d0592dbf (密码:iZUV)