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 相关文章推荐
PHP4 与 MySQL 交互使用
Oct 09 PHP
PHP实现用户认证及管理完全源码
Mar 11 PHP
array_multisort实现PHP多维数组排序示例讲解
Jan 04 PHP
php字符串分割函数explode的实例代码
Feb 07 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
Apr 29 PHP
PHP中异常处理的一些方法整理
Jul 03 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
Mar 21 PHP
PHP全局变量与超级全局变量区别分析
Apr 01 PHP
利用PHP自动生成印有用户信息的名片
Aug 01 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
Sep 30 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
Dec 21 PHP
PHP+jQuery实现双击修改table表格功能示例
Feb 21 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常用代码
2006/11/23 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
javascript面向对象编程代码
2011/12/19 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
解析JavaScript数组方法reduce
2016/12/12 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
python解析html开发库pyquery使用方法
2014/02/07 Python
Python 中的with关键字使用详解
2016/09/11 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
华润集团网上药店:健一网
2016/09/19 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
交通安全教育制度
2014/02/02 职场文书
赔偿协议书范本
2014/09/12 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
Java获取字符串编码格式实现思路
2022/09/23 Java/Android