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 相关文章推荐
分页显示Oracle数据库记录的类之一
Oct 09 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
Jan 18 PHP
php URL跳转代码 减少外链
Jun 25 PHP
php数据库配置文件一般做法分享
Jul 07 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
Aug 07 PHP
php上传文件,创建递归目录的实例代码
Oct 18 PHP
ThinkPHP中自定义错误页面和提示页面实例
Nov 22 PHP
PHP浮点数的一个常见问题
Mar 10 PHP
详解PHP实现异步调用的4种方法
Mar 14 PHP
功能强大的PHP POST提交数据类
Jul 15 PHP
yii2-GridView在开发中常用的功能及技巧总结
Jan 07 PHP
PHP基于IMAP收取邮件的方法示例
Aug 07 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
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python 文件读写操作实例详解
2014/03/12 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
python书籍信息爬虫实例
2018/03/19 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
Python类成员继承重写的实现
2020/09/16 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
工程造价专业求职信
2014/07/17 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python