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 相关文章推荐
Array of country list in PHP with Zend Framework
Oct 17 PHP
php 伪造本地文件包含漏洞的代码
Nov 03 PHP
PHP对象转换为数组函数(递归方法)
Feb 04 PHP
关于UEditor编辑器远程图片上传失败的解决办法
Aug 31 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
Feb 06 PHP
获取PHP警告错误信息的解决方法
Jun 03 PHP
PHP魔术方法使用方法汇总
Feb 14 PHP
php自定义函数实现二维数组排序功能
Jul 20 PHP
PHP两种实现无级递归分类的方法
Mar 02 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
Jun 13 PHP
Laravel5.7框架安装与使用学习笔记图文详解
Apr 02 PHP
thinkphp5 模型实例化获得数据对象的教程
Oct 18 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
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python3中eval函数用法使用简介
2019/08/02 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
厂区绿化方案
2014/05/08 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
个人学习总结范文
2015/02/15 职场文书
简历自我评价优缺点
2015/03/11 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server