jQuery实现ajax无刷新分页页码控件


Posted in Javascript onFebruary 28, 2017

这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下:

jQuery实现ajax无刷新分页页码控件 

因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用。

下面是该控件实现的js代码:

// JavaScript Document
$(function(){
  //点击分页按钮触发
  $("#pageGro li").live("click",function(){
    var pageNum = parseInt($(this).html());//获取当前页数
    //获取当前评价分类的总页数
    var totalnum = type+""+praise;
    if(pageCount[parseInt(totalnum)] > 5){
      pageGroup(pageNum,pageCount[parseInt(totalnum)]);
    }else{
      $(this).addClass("on");
      $(this).siblings("li").removeClass("on");
    }
    loadData(pageNum);//这个方法里面就是ajax获取数据的代码,为了让这个页码控件能够更通用,我将这个方法写在调用这个js的php页面中,这样使得这个页码控件能应用于更多的场景中。
  });
  //点击上一页触发
  $("#pageGro .pageUp").live("click",function(){
    var totalnum = type+""+praise;
    console.log(totalnum);
    console.log(pageCount);
    if(pageCount[parseInt(totalnum)] > 5){//初始默认显示1-5页(若真实页码小于五,则根据真实页码数显示)
      var pageNum = parseInt($(this).children("li.on").html());//获取当前页
      pageUp(pageNum,pageCount[parseInt(totalnum)]);
      loadData(pageNum);
    }else{
      var index = $("#pageGro ul li.on").index();//获取当前页
      console.log("index = "+index);
      if(index > 0){
        $(this).next().find("li").removeClass("on");//清除所有选中
        $(this).next().find("ul li").eq(index-1).addClass("on");//选中上一页
        loadData(index);
      }
    }
  });
  //点击下一页触发
  $("#pageGro .pageDown").live("click",function(){
    var totalnum = type+""+praise;
    console.log(totalnum);
    console.log(pageCount[parseInt(totalnum)]);
    if(pageCount[parseInt(totalnum)] > 5){
      var pageNum = parseInt($(this).children("li.on").html());//获取当前页
      pageDown(pageNum,pageCount[parseInt(totalnum)]);
      loadData(pageNum);
    }else{
      var index = $(this).children("ul li.on").index()+1;//获取当前页
      console.log(index);
      if(index+1 < pageCount[parseInt(totalnum)]){
        $(this).prev().find("li").removeClass("on");//清除所有选中
        $(this).prev().find("ul li").eq(index+1).addClass("on");//选中下一页
        loadData(index+2);
      }
    }
  });
});
//点击跳转页面
function pageGroup(pageNum,pageCount){
  switch(pageNum){
    case 1:
      page_icon(1,5,0);
    break;
    case 2:
      page_icon(1,5,1);
    break;
    case pageCount-1:
      page_icon(pageCount-4,pageCount,3);
    break;
    case pageCount:
      page_icon(pageCount-4,pageCount,4);
    break;
    default:
      page_icon(pageNum-2,pageNum+2,2);
    break;
  }
}
//根据当前选中页生成页面点击按钮
function page_icon(page,count,eq,element){
  var $this = element;
  var ul_html = "";
  for(var i=page; i<=count; i++){
    ul_html += "<li>"+i+"</li>";
  }
  $this.children("ul").html(ul_html);
  console.log($this.children("ul li:eq("+eq+")"));
  $this.find("ul li:eq("+eq+")").addClass("on");
}
//上一页
function pageUp(pageNum,pageCount){
  switch(pageNum){
    case 1:
    break;
    case 2:
      page_icon(1,5,0);
    break;
    case pageCount-1:
      page_icon(pageCount-4,pageCount,2);
    break;
    case pageCount:
      page_icon(pageCount-4,pageCount,3);
    break;
    default:
      page_icon(pageNum-2,pageNum+2,1);
    break;
  }
}
//下一页
function pageDown(pageNum,pageCount){
  switch(pageNum){
    case 1:
      page_icon(1,5,1);
    break;
    case 2:
      page_icon(1,5,2);
    break;
    case pageCount-1:
      page_icon(pageCount-4,pageCount,4);
    break;
    case pageCount:
    break;
    default:
      page_icon(pageNum-2,pageNum+2,3);
    break;
  }
}
//生成分页按钮
function createBtn(pageCount, element){
  if(pageCount>5){
    page_icon(1,5,0,element);
  }else{
    page_icon(1,pageCount,0,element);
  }
}

页面上该页码控件按钮的代码

<div id="pageGro" class="cb">
  <div class="pageUp">上一页</div>
  <div class="pageList">
    <ul>
     <!--页码显示区 -->
    </ul>
  </div>
  <div class="pageDown">下一页</div>
</div>

页面上写的用于被该页码控件调用实现无刷新加载数据的ajax方法

//ajax获取点击分页按钮应该加载的数据
function loadData(pageNum){
  console.log("type = "+type +", praise = " + praise);
  var beChangeElement = '';
  switch(type){
  case 0: beChangeElement += "#togivineva ";break;
  default:;
  case 1: beChangeElement += "#givineva ";break;
  }
  switch(praise){
  default:;
  case 0:beChangeElement += ".praiseAll";break;
  case 1:beChangeElement += ".praiseBad";break;
  case 2:beChangeElement += ".praiseNormal";break;
  case 3:beChangeElement += ".praiseGood";break;
  }
  $.ajax({
    type:"Get",
    url:你要请求的url地址,
    data:{page:pageNum},
    dataType:'json',
    success:function(data){
      var info = data.info;
      if(info.length > 0){//判断ajax回来的数据是否为空
        var s = '';
        beChangeElement = $(beChangeElement);
        console.log(beChangeElement);
        beChangeElement.children("div.detail-content").remove();
        $.each(info, function(index,v){
          s="你ajax出来要填补到页面上的数据";
          beChangeElement.children("#pageGro").before(s);//表示将s中的内容填充到相应页码控件前面
        });
      }else{
        var t = "<p style='text-align:center;margin:20px;font-size:18px;color:#999;'>暂时还没有内容哦!</p>";
        beChangeElement.html(t);
      }
    },
  });
}

到此,该页码控件的使用就完成了。

在其中需要注意的内容如下:

1.大家都可以看到我在ajax中用beChangeElement这个变量来表示我选中的选择器时,是把该选择器的标签以字符串的形式存储在变量中,在需要调用的时候才使用$()转换为选择器。为什么我不能在前面就直接把选择器赋给变量呢。因为jQuery不允许你选择不存在的选择器。这么说,可能就要有疑问了,什么样的情况下我要选择的选择器会不存在?(第一种情况:你把选择器的名字写错了,所以jquery找不到(我相信大多数人是不会犯这个错误的)。第二种情况:在我们使用ajax进行数据交互的时候,有很多页面上的标签和数据是我们通过ajax传递显示在页面上的,这些标签数据在页面初始化阶段是不存在的,但是我们写的js方法,非触发事件(除点击事件,鼠标悬浮等需要交互的时间)都会在页面初始化的装载阶段被解释执行,所以就会存在变量获取到不存在的选择器使得值为空阻断后续对这个选择器进行js操作),如果你在使用的时候发现js对某个选择器的操作失效了,就可以考虑一下这样的情况

2.ajax生成出来的页面内容不能跟之前页面初始化时生成的内容一样被页面原有的js控制。因为这涉及到一个异步和同步的问题,在页面渲染的时候会将对应的js绑定到相应的html标签上,等待事件触发,但是因为ajax出来的页面内容出现在页面原有的js之后,所以js无法未卜先知的去绑定它。所以我们需要根据事件冒泡机制,将需要对ajax生成出来的页面内容进行操作的js委托给该内容的父标签进行处理(我们一般选用标签作为这样的父标签,但是要注意的是,不要一次性委托太多的js在标签上,不然使得页面变得很庞大,页面的处理速度会变慢),委托事件可以表示如下:

1.$("body").on('click', ".cumulative-eva a",function(){});//click:表示要委托的事件类型(这里表示要委托的事件是点击事件),".cumulative-eva a":触发事件的选择器名字(这里表示触发点击事件的选择器是$(.cumulative-eva a)),function里面写触发事件后js对该事件的处理代码。

2.$(".cumulative-eva a").live("click",function(){});

3.在js中我写了这么一条js语句来选中上一页,语句如下:

$(this).next().find("ul li").eq(index-1).addClass("on");//选中上一页

有的人就会想在这里为什么不用children(),用children()是否也可以?那么,在解释这个问题之前我们先来看看children()和find()的区别。

区别如下:

关于遍历:children()是对当前选中的选择器标签进行编号,对于该选择器标签的子类标签无论多少个都当成一个整体,不对其进行区分。而find()则是对当前选中的选择器标签下面的子孙类标签进行编号,通过编号可以找到相对应的某一个子孙类标签。

从以上的描述我们很显然知道children()并不适用于我们这样一个应用场景,因为我们需要选中$(this)下的某一个li,这个用children()是做不到的。那么什么样的情况下可以使用children()呢,看下面这段js:

var pageNum = parseInt($(this).children("li.on").html());//获取当前页

在这个应用场景下因为页码控件的特殊性,被加上“on”这个class的li标签同一时间页面上只可能有一个,所以用children()去遍历$(this)找他的子类被加上“on”这个class的li标签,只可能返回一个结果,而不是一个数组,所以在这样的场景下可以使用children()标签。

以上为我写页码控件的全部内容,至此mark一下。最后放上该页码控件的css代码,让大家参考参考,至于控件所用的图片,我直接上传到css代码后面,你们需要的时候保存下来使用就行。(作为一个懒人,可供下载的源码包啥的我就不弄了,太麻烦,如果有兴趣的朋友,以后有时间的时候我再弄一份出来吧~)

页码控件css样式:

/* CSS Document */
/*分页*/
#pageGro{ width:400px; height:25px; margin:20px auto;}
#pageGro div,#pageGro div ul li{ font-size:12px; color:#999; line-height:23px; float:left; margin-left:5px;}
#pageGro div ul li{ width:22px; text-align:center; border:1px solid #999; cursor:pointer;}
#pageGro div ul li.on{ color:#fff; background:#3c90d9; border:1px solid #3c90d9;}
#pageGro .pageUp,#pageGro .pageDown{ width:63px; border:1px solid #999; cursor:pointer;}
#pageGro .pageUp{ text-indent:23px; background:url(../img/pageUp.png) 5px 7px no-repeat;}
#pageGro .pageDown{ text-indent:5px; background:url(../img/pageDown.png) 46px 6px no-repeat;}

页码控件中使用的上下页图标:

jQuery实现ajax无刷新分页页码控件
jQuery实现ajax无刷新分页页码控件

以上所述是小编给大家介绍的jQuery实现ajax无刷新分页页码控件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
vue实现放大镜效果
Sep 17 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 #Javascript
AngularJS constant和value区别详解
Feb 28 #Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 #Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 #Javascript
Vue.js父与子组件之间传参示例
Feb 28 #Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 #Javascript
JS对象创建的几种方式整理
Feb 28 #Javascript
You might like
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
python修改操作系统时间的方法
2015/05/18 Python
机器学习10大经典算法详解
2017/12/07 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
对python字典过滤条件的实例详解
2019/01/22 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
个人近期表现材料
2014/02/11 职场文书
烹饪自我鉴定
2014/03/01 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
媒体宣传策划方案
2014/05/25 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
社区党建工作汇报材料
2014/10/27 职场文书