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 相关文章推荐
超级简单的发送邮件程序
Oct 09 PHP
Ajax PHP简单入门教程代码
Apr 25 PHP
php 什么是PEAR?(第三篇)
Mar 19 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
May 04 PHP
ThinkPHP验证码和分页实例教程
Aug 22 PHP
php多个文件及图片上传实例详解
Nov 10 PHP
Win7下手动安装apache2.2、php5.4笔记
Apr 03 PHP
PHP实现GIF图片验证码
Nov 04 PHP
thinkphp命名空间用法实例详解
Dec 30 PHP
php实现的xml操作类
Jan 15 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
May 13 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
Jul 20 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
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
项目合作意向书范本
2014/04/01 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
小学端午节活动总结
2015/02/11 职场文书
公司催款律师函
2015/05/27 职场文书
可可西里观后感
2015/06/08 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js