基于jQuery封装的分页组件

由于项目需要实现分页效果，上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 Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解  # 用jQuery中的ajax分页实现代码  # JQuery+Ajax无刷新分页的实例代码  # 基于jQuery的实现简单的分页控件  # jQuery中jqGrid分页实现代码  # 基于JQuery的Pager分页器实现代码  # jQuery EasyUI API 中文文档 - Pagination分页  # jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版  # jQuery EasyUI datagrid实现本地分页的方法  # jQuery DataTables插件自定义Ajax分页实例解析  # jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）  # jQuery从零开始做一个分页组件功能示例  # 跳转  # 分页  # 必填  # 下一页  # 上一页  # 首页  # 第一页  # 末页  # 请点击  # 找了  # 分别为  # 则可  # 所需要  # 装了  # 时才  # 绑定  # 回调  # 大家多多  # 返回值  # 主要是 

相关文章： 如何选择高效便捷的WAP商城建站系统？  如何在IIS7中新建站点？详细步骤解析  招贴海报怎么做,什么是海报招贴？  教育培训网站制作流程,请问edu教育网站的域名怎么申请？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  网站好制作吗知乎,网站开发好学吗？有什么技巧？  网站制作与设计教程,如何制作一个企业网站，建设网站的基本步骤有哪些？  微信小程序 input输入框控件详解及实例（多种示例）  大连网站制作费用,大连新青年网站，五年四班里的视频怎样下载啊？  网站制作软件有哪些,制图软件有哪些？  建站之星logo尺寸如何设置最合适？  高性能网站服务器配置指南：安全稳定与高效建站核心方案  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  IOS倒计时设置UIButton标题title的抖动问题  建站VPS选购需注意哪些关键参数？  微信推文制作网站有哪些,怎么做微信推文，急？  官网网站制作腾讯审核要多久,联想路由器newifi官网  如何在IIS中新建站点并配置端口与物理路径？  网站制作话术技巧,网站推广做的好怎么话术？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  在线ppt制作网站有哪些,请推荐几个好的课件下载的网站？  如何在云虚拟主机上快速搭建个人网站？  如何将凡科建站内容保存为本地文件？  GML (Geography Markup Language)是什么，它如何用XML来表示地理空间信息？  网站代码制作软件有哪些,如何生成自己网站的代码？  在线制作视频的网站有哪些,电脑如何制作视频短片？  外贸公司网站制作,外贸网站建设一般有哪些步骤？  广州建站公司哪家好？十大优质服务商推荐  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  建站之星展会模板：智能建站与自助搭建高效解决方案  建站主机选择指南：服务器配置与SEO优化实战技巧  网站制作和推广的区别,想自己建立一个网站做推广，有什么快捷方法马上做好一个网站？  高端云建站费用究竟需要多少预算？  子杰智能建站系统｜零代码开发与AI生成SEO优化指南  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  如何在局域网内绑定自建网站域名？  电商平台网站制作流程,电商网站如何制作？  广东专业制作网站有哪些,广东省能源集团有限公司官网？  创业网站制作流程,创业网站可靠吗？  建站之星展会模版如何一键下载生成？  北京建设网站制作公司,北京古代建筑博物馆预约官网？  常州自助建站：操作简便模板丰富，企业个人快速搭建网站  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  建站主机与虚拟主机有何区别？如何选择最优方案？  整蛊网站制作软件,手机不停的收到各种网站的验证码短信,是手机病毒还是人为恶搞?有这种手机病毒吗？  c++怎么编写动态链接库dll_c++ __declspec(dllexport)导出与调用【方法】  PHP正则匹配日期和时间(时间戳转换)的实例代码  黑客如何利用漏洞与弱口令入侵网站服务器？  如何高效搭建专业期货交易平台网站？  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？