基于jQuery封裝的分頁組件

更新時(shí)間：2017年06月26日 15:10:20 作者：PC.aaron

這篇文章主要為大家詳細(xì)介紹了基于jQuery封裝的分頁組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

由于項(xiàng)目需要實(shí)現(xiàn)分頁效果，上jQuery插件庫找了下，但是木有找到自己想要的效果，于是自己封裝了個(gè)分頁組件。

思路：

主要是初始化時(shí)基于原型建立的分頁模板然后綁定動(dòng)態(tài)事件并實(shí)現(xiàn)刷新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='',
 //跳轉(zhuǎn)是否有值
 jumpVal='',
 //從DOM中重新獲取數(shù)據(jù)總數(shù)/總頁數(shù)
 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();
 };

 //默認(rèn)配置
 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;
  //跳轉(zhuǎn)首頁
  $(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);
   }
  }
  });
  //跳轉(zhuǎn)上一頁
  $(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);
   }
   }
  }
  });
  //跳轉(zhuǎn)下一頁
  $(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);
   }
   }
  }
  });
  //跳轉(zhuǎn)末頁
  $(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跳轉(zhuǎn)
  $(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('跳轉(zhuǎn)的頁數(shù)：'+jumpVal+';跳轉(zhuǎn)之前的頁數(shù)：'+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.組件調(diào)用

通過 window.pageInit= $.pageInit=pageInit 可完成分頁組件初始化。

暴露出來的接口分別為：

1.container：DOM的容器，默認(rèn).page

2.setPos：DOM放置的HTML位置，默認(rèn)body

3.totalPages：默認(rèn)的頁數(shù)，必填，默認(rèn)null

4.totalLists：默認(rèn)的數(shù)據(jù)總數(shù)，必填，默認(rèn)null

5.initPage：當(dāng)前頁,默認(rèn)第一頁

6.inputVal：跳轉(zhuǎn)頁，默認(rèn)第一頁

7.callBack：執(zhí)行的回調(diào)函數(shù)，必填，默認(rèn)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',//容器：默認(rèn)page
  //setPos:'body',//放置位置：默認(rèn)body
  totalPages:10,//總頁數(shù)：必填
  totalLists:100,//數(shù)據(jù)總數(shù)：必填
  initPage:1,//初始頁碼：默認(rèn)1
  inputVal:1,//設(shè)置跳轉(zhuǎn)的input值：默認(rèn)1
  //要執(zhí)行的函數(shù)：默認(rèn)null，必須為fn且返回true則可執(zhí)行分頁，false則不執(zhí)行
  callBack:function(n){
   var flag=true;
   console.log(n);
   return flag;
  }
  }
 );
</script>
</body>
</html>

效果：

通過callBack接口，添加自己所需要執(zhí)行的function函數(shù)，并且需要return true時(shí)才回執(zhí)行動(dòng)態(tài)的DOM渲染。