php实现网页上一页下一页翻页过程详解


Posted in PHP onJune 28, 2019

前言

这几天做项目因为数据太多,需要对信息进行上下翻页展示,就自己写了翻页的代码
大致功能就是页面只显示几条信息,按上一页、下一页切换内容,当显示第一页时上一页和首页选项不可选,当页面加载到最后一页时下一页和尾页选项不可选

具体效果如下:

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>

上下翻页:

<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>

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*/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
优化使用mysql存储session的php代码
Jan 10 PHP
php连接数据库代码应用分析
May 29 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
Oct 16 PHP
php中count获取多维数组长度的方法
Nov 03 PHP
PHP中__FILE__、dirname与basename用法实例分析
Dec 01 PHP
jquery获取多个checkbox的值异步提交给php的方法
Jun 24 PHP
php生成4位数字验证码的实现代码
Nov 23 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
Jul 08 PHP
php下载文件超时时间的设置方法
Oct 06 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
Sep 21 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
Jun 13 PHP
phpstorm激活码2020附使用详细教程
Sep 25 PHP
php输出控制函数和输出函数生成静态页面
Jun 27 #PHP
php生成静态页面并实现预览功能
Jun 27 #PHP
PHP创建对象的六种方式实例总结
Jun 27 #PHP
PHP实现的抓取小说网站内容功能示例
Jun 27 #PHP
不常用但很实用的PHP预定义变量分析
Jun 25 #PHP
PHP中define() 与 const定义常量的区别详解
Jun 25 #PHP
php字符串截取函数mb_substr用法实例分析
Jun 25 #PHP
You might like
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
15个小时----从修改程序到自己些程序
2006/10/09 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
PHP中header用法小结
2016/05/23 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python正则表达式使用经典实例
2016/06/21 Python
python入门教程 python入门神图一张
2018/03/05 Python
Python pymongo模块用法示例
2018/03/31 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
浅析python 字典嵌套
2020/09/29 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
交通事故赔偿协议书
2014/04/15 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
2015年幼师工作总结
2015/04/28 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
详解Python中__new__方法的作用
2022/03/31 Python
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers