基于jQuery封装的分页组件


Posted in jQuery onJune 26, 2017

由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件。

思路:

主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页效果。

1.page.init.css

@charset "utf=8";
*{
 box-sizing: border-box;
 padding: 0;
 margin: 0;
}
.page{
 font-size: 13px;
 text-align: right;
}
.page .page_to{
 display: inline-block;
 max-width: 250px;
}
.page .page_to li{
 display: inline-block;
 width: auto;
 height: auto;
 border: 1px solid #ddd;
 padding:5px 10px;
 border-left-width: 0;
 color: #323232;
 cursor: pointer;
}
.page .page_to li.page_hide{
 display: none;
}
.page .page_to li:hover{
 color: #32C2CD;
 background-color: #f4f4f4;
 border-color: #DDDDDD;
}
.page .page_to li:first-child{
 border-left-width: 1px;
}
.page .page_jump{
 display: inline-block;
 width: 180px;
}
.page .page_jump input.page_jump_input{
 width: 52px;
 height: 28px;
 text-align: center;
 text-decoration: none;
 background-color: #fff;
 border: 1px solid #ddd;
 margin:0 4px;
}
.page .page_jump input.page_jump_btn{
 display: inline-block;
 padding: 7px 20px;
 margin-left: 5px;
 font-size: 14px;
 font-weight: 400;
 line-height: 1.42857143;
 text-align: center;
 white-space: nowrap;
 vertical-align: middle;
 -ms-touch-action: manipulation;
 touch-action: manipulation;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 border: 1px solid transparent;
 border-radius: 4px;
 background-color: #00BB9C;
 color: #FFFFFF;
 font-weight: bold;
}

2.pageInit.js

/**
 * Created: 2017/6/20.
 * author: Aaron
 * address: http://www.cnblogs.com/aaron-pan/
 */
(function($,window,undefined){

 var curPage='',
 //跳转是否有值
 jumpVal='',
 //从DOM中重新获取数据总数/总页数
 lists='',
 totals='',
 //是否返回值
 isTrue=false;

 var Page=function(opts){
 this.settings= $.extend({},Page.defaults,opts);
 curPage=this.settings.initPage;
 totals=this.settings.totalPages;
 jumpVal=this.settings.inputVal;
 this.init();
 };

 //默认配置
 Page.defaults={
 container:'.page',
 setPos:'body',
 totalPages:null,
 totalLists:null,
 initPage:1,
 inputVal:1,
 callBack:null
 };

 Page.prototype={
 init:function(){
  this.create();
 },
 create:function(){
  var _template='<div class="page">'+
  '<span class="page_details">'+
  '共<span class="page_num">'+this.settings.totalLists+'</span>条记录,'+
  '第<span class="page_current">'+curPage+'</span>/'+
  '<span class="page_size">'+this.settings.totalPages+'</span>页'+
  '</span>'+
  '<div class="page_to">'+
  '<ul class="flex_parent">'+
  '<li class="page_first flex_child">首页</li>'+
  '<li class="page_pre page_hide flex_child">« 上一页</li>'+
  '<li class="page_next flex_child">下一页 »</li>'+
  '<li class="page_last flex_child">末页</li>'+
  '</ul>'+
  '</div>'+
  '<div class="page_jump">'+
  '<span>第:<input type="number" class="page_jump_input" value="'+this.settings.inputVal+'">页</span>'+
  '<input type="button" class="page_jump_btn" value="Go">'+
  '</div>'+
  '</div>';
  $(this.settings.setPos).append(_template);
  this.refreshDom();
  this.bindEvent();
 },
 bindEvent:function(){
  var _this=this;
  //跳转首页
  $(this.settings.container).on("click",".page_first",function(){

  lists=$(_this.settings.container).find(".page_num").text();
  totals=$(_this.settings.container).find(".page_size").text();

  if($.isFunction(_this.settings.callBack)){
   curPage=1;
   isTrue=_this.settings.callBack(1);
   if(isTrue){
   _this.refreshDom();
   $(_this.settings.container).find(".page_current").text(1);
   $(_this.settings.container).find(".page_jump_input").val(curPage);
   }
  }
  });
  //跳转上一页
  $(this.settings.container).on("click",".page_pre",function(){

  lists=$(_this.settings.container).find(".page_num").text();
  totals=$(_this.settings.container).find(".page_size").text();

  if($.isFunction(_this.settings.callBack)){
   if(curPage>1){
   curPage=curPage-1;
   isTrue=_this.settings.callBack(curPage);
   if(isTrue){
    _this.refreshDom();
    $(_this.settings.container).find(".page_current").text(curPage);
    $(_this.settings.container).find(".page_jump_input").val(curPage);
   }
   }
  }
  });
  //跳转下一页
  $(this.settings.container).on("click",".page_next",function(){

  lists=$(_this.settings.container).find(".page_num").text();
  totals=$(_this.settings.container).find(".page_size").text();


  if($.isFunction(_this.settings.callBack)){
   if(curPage<totals){
   curPage=curPage+1;
   isTrue=_this.settings.callBack(curPage);
   if(isTrue){
    _this.refreshDom();
    $(_this.settings.container).find(".page_current").text(curPage);
    $(_this.settings.container).find(".page_jump_input").val(curPage);
   }
   }
  }
  });
  //跳转末页
  $(this.settings.container).on("click",".page_last",function(){

  lists=$(_this.settings.container).find(".page_num").text();
  totals=$(_this.settings.container).find(".page_size").text();

  if($.isFunction(_this.settings.callBack)){
   curPage=totals;
   isTrue=_this.settings.callBack(curPage);
   if(isTrue){
   _this.refreshDom();
   $(_this.settings.container).find(".page_current").text(totals);
   $(_this.settings.container).find(".page_jump_input").val(curPage);
   }
  }
  });
  //Go跳转
  $(this.settings.container).on("click",".page_jump_btn",function(){

  lists=$(_this.settings.container).find(".page_num").text();
  totals=$(_this.settings.container).find(".page_size").text();

  if($.isFunction(_this.settings.callBack)){
   jumpVal=Number($(_this.settings.container).find("input.page_jump_input").val());
   console.log('跳转的页数:'+jumpVal+';跳转之前的页数:'+curPage);
   if(jumpVal>=1 && jumpVal <=totals){
   curPage=jumpVal;
   isTrue=_this.settings.callBack(curPage);
   if(isTrue){
    _this.refreshDom();
    $(_this.settings.container).find(".page_current").text(curPage);
   }
   }else{
   jumpVal=curPage;
   }
  }
  });
 },
 refreshDom:function(){
  $(this.settings.container).find("li.flex_child").removeClass("page_hide");
  if(Number(totals)==1){
  $(this.settings.container).find(".page_pre").addClass("page_hide");
  $(this.settings.container).find(".page_next").addClass("page_hide");
  }
  else if(Number(totals)==2){
  if(Number(curPage)==1){
   $(this.settings.container).find(".page_pre").addClass("page_hide");
  }else{
   $(this.settings.container).find(".page_next").addClass("page_hide");
  }
  }
  else if(Number(curPage)==1 && Number(totals)>2){
  $(this.settings.container).find(".page_pre").addClass("page_hide");
  }
  else if(Number(curPage)==Number(totals) && Number(totals)>2){
  $(this.settings.container).find(".page_next").addClass("page_hide");
  }
 }
 };

 var pageInit=function(opts){
 return new Page(opts);
 };

 window.pageInit= $.pageInit=pageInit;

})(jQuery,window,undefined);

3.组件调用

通过 window.pageInit= $.pageInit=pageInit 可完成分页组件初始化。

暴露出来的接口分别为:

1.container:DOM的容器,默认.page

2.setPos:DOM放置的HTML位置,默认body

3.totalPages:默认的页数,必填,默认null

4.totalLists:默认的数据总数,必填,默认null

5.initPage:当前页,默认第一页

6.inputVal:跳转页,默认第一页

7.callBack:执行的回调函数,必填,默认null

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>基于jQuery封装的分页组件</title>
 <link rel="stylesheet" href="css/page.init.css">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="js/pageInit.js"></script>
<script>
 $.pageInit(
  {
  container:'.page',//容器:默认page
  //setPos:'body',//放置位置:默认body
  totalPages:10,//总页数:必填
  totalLists:100,//数据总数:必填
  initPage:1,//初始页码:默认1
  inputVal:1,//设置跳转的input值:默认1
  //要执行的函数:默认null,必须为fn且返回true则可执行分页,false则不执行
  callBack:function(n){
   var flag=true;
   console.log(n);
   return flag;
  }
  }
 );
</script>
</body>
</html>

效果:

通过callBack接口,添加自己所需要执行的function函数,并且需要return true时才回执行动态的DOM渲染。

基于jQuery封装的分页组件

更多精彩内容请点击:jquery分页功能汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 #jQuery
jQuery实现一个简单的验证码功能
Jun 26 #jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 #jQuery
jQuery实现frame之间互通的方法
Jun 26 #jQuery
jQuery回调方法使用示例
Jun 26 #jQuery
jQuery实现拖动效果的实例代码
Jun 25 #jQuery
jQuery validata插件实现方法
Jun 25 #jQuery
You might like
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
vue实现城市列表选择功能
2018/07/16 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python装饰器用法实例总结
2018/05/26 Python
教师中国梦演讲稿
2014/04/23 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
节能减耗标语
2014/06/21 职场文书
2014教师研修学习体会
2014/07/08 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫