基于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 Masonry瀑布流布局神器使用详解
May 25 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 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
php URL验证正则表达式
2011/07/19 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
让Python更加充分的使用Sqlite3
2017/12/11 Python
Linux下多个Python版本安装教程
2018/08/15 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
大学生应聘自荐信
2013/10/11 职场文书
旷课检讨书大全
2014/01/21 职场文书
报关报检委托书
2014/04/08 职场文书
诚信承诺书模板
2014/05/26 职场文书
技术入股合作协议书
2016/03/21 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript