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 相关文章推荐
php时间不正确的解决方法
Apr 09 PHP
PHP 危险函数全解析
Sep 09 PHP
window+nginx+php环境配置 附配置搭配说明
Dec 29 PHP
学习php分页代码实例
Oct 24 PHP
ThinkPHP3.1新特性之查询条件预处理简介
Jun 19 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
Nov 19 PHP
php中有关合并某一字段键值相同的数组合并的改进
Mar 10 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
Mar 12 PHP
PHP 错误处理机制
Jul 06 PHP
php读取torrent种子文件内容的方法(测试可用)
May 03 PHP
PHP实现的观察者模式实例
Jun 21 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
Apr 04 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高级OOP技术演示
2009/08/27 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
解密Python中的描述符(descriptor)
2015/06/03 Python
Python多继承顺序实例分析
2018/05/26 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
Python anaconda安装库命令详解
2021/10/16 Python
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript