php网页浏览功能的具体实现(php实现网页上一页下一页翻页过程详解)
类别:编程学习 浏览量:1211
时间:2022-01-20 00:34:02 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(连接数据库)
|
<?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> |
上下翻页:
|
< li 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 > </ li > |
2)ajax方法
HTML代码,展示信息装在panel-body里面
|
< li class = "panel-body" id = "content" > < ul id = "list" class = "media-list" > </ ul > </ li > < li 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 > </ li > < 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 > |
JS代码:
|
var html=$( '#temp' ).html(); var curPage=0,pages=0; $.getJSON( 'php/pages.php' , function (res) { pages=Math.ceil(res/4); /*获取信息的总页数*/ }); function show(cPage){ //替换每一页的内容 $.getJSON( 'php/listmore.php' ,{cPage:cPage}, function (json) { var str= '' ; $( '#list' ).empty(); json.forEach( function (el) { str+=html.replace( '{id}' ,el.id).replace( '{title}' ,el.title).replace( '{src}' ,el.src) .replace( '{content}' ,el.content).replace( '{date}' ,el.time); }); $( '#list' ).html(str); }); $( '#total' ).html((curPage+1)+ '/' +pages); } setTimeout( function () { show(0); },100); $( '#page' ).on( 'click' , 'li' , function () { //上下翻页,翻遍当前页的值 var i=$( this ).data( 'i' ); //jquery里特有的获取data-*属性的方法 switch (i){ case 0:curPage=0; break ; case 1:curPage>0?curPage--:0; break ; case 2:curPage<(pages-1)?curPage++:pages-1; break ; case 3:curPage=pages-1; break ; } show(curPage); disabled(curPage); }) function disabled(curPage) { //关于临界值禁止选择 if (curPage==0){ /*当前页为第一页,首页和上一页选项禁止点击*/ $( '#index' ).addClass( 'disabled' ).next().addClass( 'disabled' ); $( '#end' ).removeClass( 'disabled' ).prev().removeClass( 'disabled' ); } else if (curPage==pages-1){ $( '#index' ).removeClass( 'disabled' ).next().removeClass( 'disabled' ); $( '#end' ).addClass( 'disabled' ).prev().addClass( 'disabled' ); } else { /*当前页为最后一页,尾页和下一页选项禁止点击*/ $( '#index' ).removeClass( 'disabled' ).next().removeClass( 'disabled' ); $( '#end' ).removeClass( 'disabled' ).prev().removeClass( 'disabled' ); } } |
connect.php(连接数据库)
|
<?php $link = new PDO( "mysql:host=localhost;port=3306;dbname=db" , "root" , "" ); $link ->query( "set names utf8" ); |
pages.php(获取总页数)
|
<?php include_once ( 'connect.php' ); //连接数据库 $result = $link ->query( "select * from news" ); $row = $result ->rowCount(); echo $row ; |
listmore.php(获取数据库里的数据)
|
<?php include_once ( 'connect.php' ); $num = 4; //每一页显示的数据条数 $cPage = $_GET [ 'cPage' ]; //获取当前页 $start = $cPage * $num ; //计算当前页显示的第一条数据的数目 /*从表中查询从开始$start的一共$num条数据*/ $result = $link ->query( "select * from news order by id desc limit {$start},$num" ); $link = null; while ( $row = $result ->fetch()){ /*每一次读取一条数据*/ $json []= $row ; /*把数据赋给json数组*/ } echo json_encode( $json ); /*把json数组以json格式返回给HTML*/ |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
原文链接:https://www.cnblogs.com/xyyl/p/10969709.html
您可能感兴趣
- php数据类型图解(php使用filter_var函数判断邮箱,url,ip格式示例)
- php语法检测方法(php中文语义分析实现方法示例)
- php命名空间真的存在吗(PHP中命名空间的使用例子)
- php实现无cookie的session(php实现多站点共用session实现单点登录的方法详解)
- php的模块加载(PHP中的自动加载操作实现方法详解)
- php怎么实现多线程(PHP实现的多进程控制demo示例)
- nginx 怎么搭建web服务器(Linux+Nginx+Php架设高性能WEB服务器)
- php常见的数组函数(用php定义一个数组最简单的方法)
- python与php比较(浅谈php调用python文件)
- php面向对象怎么用(PHP面向对象程序设计之对象克隆clone和魔术方法__clone用法分析)
- php系统转换的三种方式(PHP容器类的两种实现方式示例)
- php生成安全随机数(PHP随机数函数rand与mt_rand的讲解)
- php调试用什么工具好(调试php程序的简单步骤)
- php中如何打开文件读文件(PHP通过文件保存和更新信息的方法分析)
- php模块使用方法(PHP操作XML中XPath的应用示例)
- dedecms验证码识别(dedecms 软件下载频道防盗链php代码)
- 张勇 阿里新任掌门人(阿里新任掌门人)
- 毛戈平全国第一柜花落银泰 高端国货迎来 高光 时刻(毛戈平全国第一柜花落银泰)
- 14岁丧父 20岁丧母,从苦难走向辉煌的银泰创始人沈国军(14岁丧父20岁丧母从苦难走向辉煌的银泰创始人沈国军)
- 银泰集团董事长沈国军获评 北京影响力 十大企业家(银泰集团董事长沈国军获评)
- 15帅气男士发型,清爽时尚很有型,喜欢就试试(清爽时尚很有型)
- 哪几个历史人物被影协主席李雪健演的活灵活现(哪几个历史人物被影协主席李雪健演的活灵活现)
热门推荐
- php中钩子的理解与实例教程(php中钩子hook的原理与简单应用demo示例)
- 免费国外云服务器有哪些?(免费国外云服务器有哪些?)
- python使用什么函数定义匿名函数(Python匿名函数及应用示例)
- 云服务器可以自己建网站吗(自己建网站怎么选择服务器)
- mysql缓存是什么(详解mysql查询缓存简单使用)
- css3渐变背景教程(css3实现背景图片颜色修改的多种方式)
- 如何用iis7.5设置网站(IIS .7z文件支持下载的添加方法)
- 无法识别的属性“targetFramework”的解决方法
- python 多线程与多进程(python 多线程串行和并行的实例)
- pythonlambda详解(Python的条件表达式和lambda表达式实例)