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 伪静态隐藏传递参数名的四种方法
Feb 22 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
May 18 PHP
解析PHP中$_FILES的使用以及注意事项
Jul 05 PHP
PHP把网页保存为word文件的三种方法
Apr 01 PHP
php表单请求获得数据求和示例
May 15 PHP
php cli配置文件问题分析
Oct 15 PHP
YiiFramework入门知识点总结(图文教程)
Dec 28 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
Aug 01 PHP
php生成无限栏目树
Mar 16 PHP
Laravel下生成验证码的类
Nov 15 PHP
yii2的restful api路由实例详解
May 14 PHP
thinkphp框架表单数组实现图片批量上传功能示例
Apr 04 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
关于页面优化和伪静态
2009/10/11 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
javascript中this指向详解
2016/04/23 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python何时应该使用Lambda函数
2019/07/02 Python
python实现图像全景拼接
2020/03/27 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
售后服务承诺书范文
2014/03/26 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android