PHP+JQuery+Ajax实现分页方法详解


Posted in PHP onAugust 06, 2016

本文实例讲述了PHP+JQuery+Ajax实现分页的方法。分享给大家供大家参考,具体如下:

为了锻炼下jQuery,决定自己动手写写分页

最终的效果如图:

点击某个字母后,下方显示以该字母为首字母的所有词语;

分页显示,每页显示15个词语,每组页码有20个,1-20/20-40~~~

PHP+JQuery+Ajax实现分页方法详解

首先是在PHP文件中的分页Pager的相关代码

public function searchWordsByInitial()
    //从AJAX发出的URL中获得参数:用户点击的字母和点击的页码
    $initial = htmlentities($_POST['initial'], ENT_QUOTES,"UTF-8");
    $page = htmlentities($_POST['page'], ENT_QUOTES,"UTF-8");
    $words = $this->_createWordObj();
    $i=0;//用于显示序号从1开始
    $perPageNum=12;//每一页显示的条数为12条
    $currentPageFirst=($page-1)*$perPageNum+1;
    $currentPageLast=$page*$perPageNum;
    //获取总记录数
    $sumNum=0;
    foreach ( $words[$initial] as $key=> $word ){
      $sumNum++;
    }
    //获取总页数
    $pageNums=0;
    if( $sumNum ){
      if( $sumNum < $perPageNum ){ $pageNums = 1; }        //如果总数据量小于$PageSize,那么只有一页
      if( $sumNum%$perPageNum ){                 //取总数据量除以每页数的余数
        $pageNums = (int)($sumNum/$perPageNum) + 1;      //如果有余数,则页数等于总数据量除以每页数的结果取整再加一
      }else{
        $pageNums = $sumNum/$perPageNum;           //如果没有余数,则页数等于总数据量除以每页数的结果
      }
    }
    else{
      $pageNums = 0;
    }
  //Pager显示
    echo $this->init_searchWordsByInitial_Pager($sumNum,$pageNums,$page);
    $tab_str.="<table ……………………这里是页面的具体内容………………"
    return $tab_str;
}
public function init_searchWordsByInitial_Pager($sumNum,$pageNums,$page)
{
     //根据用户点击的页码,获得当前页码组的首页码,如用户点击的38,那么这一组是21-40,首页码是21
     $current_first_page=floor(($page-1)/20)*20+1;
     $tab_str="<div id='searchWordsByInitial_Pager' class='pagination pagination-centered'><ul>";
     for($k=0;$k<=19;$k++)
     {
       $j=$k+$current_first_page;
       $tab_str.="<button class='not_more_btn'>".$j."</button>";
     }
     $tab_str.="</ul>  一共<span id='sumNums'>".$sumNum."</span>个词语,<span id='pageNums'>".$pageNums."</span>页</div>";
     return $tab_str;
}

init.js   相关的JQuery代码,响应用户的动作

//初始化分页 Pager
var pageNums;//总页数
var sumNums;//总记录数
function init_searchWordsByInitial_Pager(){
   pageNums=$("#pageNums").html();//JS从页面HTML获取
   sumNums=$("#sumNums").html();
   if(pageNums==1)//如果只有一页,则隐藏Pager
   {
    $("#searchWordsByInitial_Pager").html("</br>");
   }
   //让页码的默认值为1,默认显示的是第一页;
   if(page_initial==undefined){ page_initial=1;}
   //当页面过多时,我们一组只显示20个页码,后面缀一个NEXT按钮,点击后可以显示后面20个页码;同样,LAST按钮可以显示前面20个按钮
   $("#searchWordsByInitial_Pager ul button:eq(19)").after("<button id='more_forward' class='more'>Next</button>");
   $("#searchWordsByInitial_Pager ul button:eq(0)").before("<button id='more_backword' class='more'>Last</button>");
   //如果最后一组少于21页,那么就隐藏最后一个页码后面的,包括NEXT按钮【pageNums<21】
   //如果用户点击的page是最后20个page,那么也要隐藏最后一个页码后面的,包括NEXT按钮【offset<20】
   //(由于点击page会触发本初始化函数/其实可以将初始化函数的调用仅仅绑定到单击字母事件即可,不必跟Ajax动作绑在一起)
   var offset;
   offset=(Math.ceil(pageNums/20)*20)-parseInt(page_initial);
   if(pageNums<21||offset<20)
   {
    $("#searchWordsByInitial_Pager ul button").slice((pageNums%20)+1).hide();
   }
   //如果正好是20页,根据上一段代码,offset=19<20,会把整个Pager隐藏;需要再把它显示出来
   if(search_pageNums==20)
   {
      $("#searchWords_Pager ul button.not_more_btn").show();
   }
   //如果当前组的第一个page是1,那么隐藏LAST按钮;否则显示LAST按钮,允许用户点击翻到上一组
   if($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(0).html()==1)
   {
      $("#searchWordsByInitial_Pager ul button:eq(0)").hide();
   }
   else
   {
      $("#searchWordsByInitial_Pager ul button:eq(0)").show();
   }
  }
  //单击NEXT按钮
  $("#more_forward").live("click",function(event){
    //只要有往后翻页,就会有 Last 按钮
    $("#searchWordsByInitial_Pager ul button:eq(0)").show();
    //让每一个page都自加20,如1-20变为21-40
    for(i=0;i<20;i++){
     $("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html(parseInt($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html())+20);
     //隐藏最后一个页码后面的按钮
     if($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html()==pageNums)
     {
       $("#searchWordsByInitial_Pager ul button").slice(i+2).hide();
     }
    }
    })
  //单击LAST按钮
  $("#more_backword").live("click",function(event){
    //首先要让20个按钮都显示出来
    $("#searchWordsByInitial_Pager ul button").show();
    for(i=0;i<20;i++){
     $("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html(parseInt($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(i).html())-20);
    }
    //判断是否要隐藏Last按钮
    if($("#searchWordsByInitial_Pager ul button.not_more_btn").eq(0).html()==1)
    {
      $("#searchWordsByInitial_Pager ul button:eq(0)").hide();
    }
    else
    {
      $("#searchWordsByInitial_Pager ul button:eq(0)").show();
    }
    })
   //获取用户点击的字母
   $(".initial-button-list button").live("click", function(event){
   //清除所有字母A-Z按钮的active class,并且设置点击的字母按钮为 active;这里不要使用 .attr 和 .removeAttr;
   $(".initial-button-list button").removeClass("active");
   $(this).addClass("active");
   //获取当前点击的字母和页码
   initial_value = $(this).html();
   page_initial=1;
   //将要传送的参数拼串 &action=list_by_initial&initial=O&page_initial=3
   btnData = "&action=list_by_initial"+ "&initial="+initial_value+"&page="+page_initial;
   $.ajax({
    type: "POST",
    url: processFile,
    data: btnData,
    success: function(data) {
     $("#word_table_by_initials").show();
     $("#word_table_by_initials").html("");
     $("#word_table_by_initials").html(data);
     init_searchWordsByInitial_Pager();
    },
    error: function(msg)
    {
      alert(msg);
    }
   });
 });
 //获取用户点击的页码(除去点击 more 按钮)
 $("#searchWordsByInitial_Pager button.not_more_btn").live("click", function(event){
   //清除所有页码的active class,并且设置点击的页码为 active;这里不要使用 .attr 和 .removeAttr;
   $("#searchWordsByInitial_Pager button").removeClass("active");
   $(this).addClass("active");
   //获取当前点击的页码
   page_initial=$(this).html();
   //将要传送的参数拼串 &action=list_by_initial&initial=O&page_initial=3
   btnData = "&action=list_by_initial"+ "&initial="+initial_value+"&page="+page_initial;
   $.ajax({
    type: "POST",
    url: processFile,
    data: btnData,
    success: function(data) {
     $("#word_list_by_initials").hide();
     $("#word_table_by_initials").html("");
     $("#word_table_by_initials").html(data);
     init_searchWordsByInitial_Pager();
    },
    error: function(msg)
    {
      alert(msg);
    }
   });
 });
});

一些注意事项:

1 $("div button.not_more_bt")中,前两个选择器之间是有空格 的,后两个没有;因为最后一个是 类选择器,要直接跟在button后面

2 .html() .val() .text()  的区别

3 :eq(index),:lt(index);gt(index) 中的 index 是从0开始,而且不能为变量,必须为 数字

如果需要让用到动态的 index,可以用

.eq(i)

4 var a=20;
var b=10;
var c;
c=a+b;

结果不是 30!是2020!

正确的写法是 c=parseInt(a)+_parseInt(b);

减法没事,但是最好也要转化一下

PHP 的 函数是 intval();

5 写代码之前,一定要规划好最优的方案,否则重头来就更费事了

6 JS代码和HTML加载的逻辑顺序

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
php笔记之:初探PHPcms模块开发介绍
Apr 26 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
Jun 17 PHP
数组与类使用PHP的可变变量名需要的注意的问题
Jun 20 PHP
php和jquery实现地图区域数据统计展示数据示例
Feb 12 PHP
php使用smtp发送支持附件的邮件示例
Apr 13 PHP
PHP递归复制、移动目录的自定义函数分享
Nov 18 PHP
PHP定时执行任务的3种方法详解
Dec 21 PHP
php微信开发之带参数二维码的使用
Aug 03 PHP
php使用Jpgraph创建折线图效果示例
Feb 15 PHP
php动态读取数据清除最右边距的方法
Apr 12 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
Mar 30 PHP
Yii框架 session 数据库存储操作方法示例
Nov 18 PHP
微信自定义菜单的创建/查询/取消php示例代码
Aug 05 #PHP
Thinkphp微信公众号支付接口
Aug 04 #PHP
浅析Laravel5中队列的配置及使用
Aug 04 #PHP
PHP中如何判断exec函数执行成功?
Aug 04 #PHP
详解Laravel视图间共享数据与视图Composer
Aug 04 #PHP
yii的入口文件index.php中为什么会有这两句
Aug 04 #PHP
Laravel最佳分割路由文件(routes.php)的方式
Aug 04 #PHP
You might like
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
python使用pymysql实现操作mysql
2016/09/13 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python3.7 sys模块的具体使用
2019/07/22 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
有兼职工作经历的简历自我评价
2014/03/07 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
JS数组去重详情
2021/11/07 Javascript