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

php  /  管理员 发布于 7年前   817

前言

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

具体效果如下：

实现代码

1）原生PHP方法

先说一下总思路吧，首先我们要查询所有符合条件需要进行分页的总数据，计算展示的总页数。

然后获取当前显示的是第几页信息，用当前页数每页数据条数表示为总数据的第几条，再根据限制条件查询出当前页所需显示出来的数据。将每一条数据echo替换HTML结构内容中，最后显示出来

关于分页的限制条件很简单，只要查询到当前页为第1页时，首页和上一页选项跳转链接都固定在第一页同时设置选项disabled不可选，尾页也是相同的步骤。

具体代码如下：

当前页cPage需要传过来，我的办法是初始cPage=0

list.php*

更多>>$row=$table->fetch()每次读取一条信息，得到的是一个索引数组，代码里的$row['id']表示$row里面名为id的值，也可表示为$row.id

connect.php(连接数据库)

query("set names utf8");

listmore.php

 
      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 <<<_      
  •         
    {$row['title']} {$row['time']}
            
    {$row['content']}
            
      
    •   _;    }  ?>

上下翻页：

2)ajax方法

HTML代码，展示信息装在panel-body里面

 
    
           
    
     
           
  • «首页
    •        
  • <上一页
    •        
  • 下一页>
    •        
  • 尾页»
    •        
  •     
    •

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(连接数据库)

query("set names utf8");

pages.php（获取总页数）

query("select * from news");$row=$result->rowCount();echo $row;

listmore.php（获取数据库里的数据）

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常用的类封装小结【4个工具类】
    下一条：
    php输出控制函数和输出函数生成静态页面

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客