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 相关文章推荐
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
使用layui实现树形结构的方法
Sep 20 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 url 加密解密函数代码
2011/08/26 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python中的格式化输出用法总结
2016/07/28 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
节约用电倡议书
2015/04/28 职场文书
小学中队活动总结
2015/05/11 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
python爬虫--selenium模块
2021/03/31 Python
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android