php实现网页上一页下一页翻页过程详解
发布时间:2022-07-22 09:44:36 所属栏目:PHP教程 来源:互联网
导读:这篇文章主要介绍了php实现网页上一页下一页翻页过程详解,大致功能就是页面只显示几条信息,按上一页、下一页切换内容,当显示第一页时上一页和首页选项不可选,当页面加载到最后一页时下一页和尾页选项不可选,需要的朋友可以参考下。 前言 这几天做项目因为
|
这篇文章主要介绍了php实现网页上一页下一页翻页过程详解,大致功能就是页面只显示几条信息,按上一页、下一页切换内容,当显示第一页时上一页和首页选项不可选,当页面加载到最后一页时下一页和尾页选项不可选,需要的朋友可以参考下。 前言 这几天做项目因为数据太多,需要对信息进行上下翻页展示,就自己写了翻页的代码 大致功能就是页面只显示几条信息,按上一页、下一页切换内容,当显示第一页时上一页和首页选项不可选,当页面加载到最后一页时下一页和尾页选项不可选 具体效果如下: php上一页 php下一页 实现代码 1)原生PHP方法 先说一下总思路吧,首先我们要查询所有符合条件需要进行分页的总数据,计算展示的总页数。 然后获取当前显示的是第几页信息,用当前页数每页数据条数表示为总数据的第几条,再根据限制条件查询出当前页所需显示出来的数据。将每一条数据echo替换HTML结构内容中,最后显示出来 关于分页的限制条件很简单,只要查询到当前页为第1页时,首页和上一页选项跳转链接都固定在第一页同时设置选项disabled不可选,尾页也是相同的步骤。 具体代码如下: 当前页cPage需要传过来,我的办法是初始cPage=0 list.php* <a href="listmore.php?cPage=0" rel="external nofollow" rel="external nofollow" class="pull-right">更多>></a> $row=$table->fetch()每次读取一条信息,得到的是一个索引数组,代码里的$row['id']表示$row里面名为id的值,也可表示为$row.id connect.php(连接数据库) $link=new PDO("mysql:host=localhost;port=3306;dbname=db","root",""); $link->query("set names utf8"); listmore.php <ul id="list" class="media-list"> <?php include_once('connect.php'); $result = $link->query("select * from news"); $total=$result->rowCount();//查询出来符合条件的总数 $pages=ceil($total/4);//分页的总页数 $num = 4;//每页显示的数据条数 $cPage = $_GET['cPage'];//获取当前是显示的第几页 $start = $cPage * $num;//第一条数据 $table = $link->query("select * from news order by id desc limit {$start},$num"); $link = null;//销毁 while ($row=$table->fetch()){//每次读出一条数据,赋给$row //插入多行文本,把值替换掉 echo <<<_ <li class="media"> <a href="detail.php?id={$row['id']}"> <img class="pull-left" src="{$row['src']}"> <figcaption> <h4><span class="title">{$row['title']}</span> <span class="news-date">{$row['time']}</span></h4> <p>{$row['content']}</p> </figcaption> </a> </li> _; } ?> </ul> 上下翻页: <div class="page text-center"> <ul class="pagination" id="page"> <li data-i="0" id="index" class="<?php if ($cPage==0) echo 'disabled'; ?>"><a href="listmore.php?cPage=0">«首页</a></li> <li data-i="1" class="<?php if ($cPage==0) echo 'disabled';?>"><a href="listmore.php?cPage=<?php echo $cPage>0?$cPage-1:0?>"><上一页</a></li> <li data-i="2" class="<?php if ($cPage==$pages-1) echo 'disabled'?>"><a href="listmore.php?cPage=<?php echo $cPage==($pages-1)?$pages-1:$cPage+1?>">下一页></a></li> <li data-i="3" id="end" class="<?php if ($cPage==$pages-1) echo 'disabled'?>"><a href="listmore.php?cPage=<?php echo $pages-1?>">尾页»</a></li> <li class="disabled"> <a href="##" id="total"><?php echo ($cPage+1)?>/<?php echo "$pages"?></a> </li> </ul> </div> 2)ajax方法 HTML代码,展示信息装在panel-body里面 <div class="panel-body" id="content"> <ul id="list" class="media-list"> </ul> </div> <div class="page text-center"> <ul class="pagination" id="page"> <li data-i="0" id="index" class="disabled"><a href="##">«首页</a></li> <li data-i="1" class="disabled"><a href="##"><上一页</a></li> <li data-i="2"><a href="##">下一页></a></li> <li data-i="3" id="end"><a href="##">尾页»</a></li> <li class="disabled"> <a href="##" id="total"></a> </li> </ul> </div> <template id="temp"> //引用模板 <li class="media"> <a href="detail.html?id={id}"> <img class="pull-left" src="{src}"> <figcaption> <h4><span class="title">{title}</span> <span class="news-date">{date}</span></h4> <p>{content}</p> </figcaption> </a> </li> </template> (编辑:盐城站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |



