登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery封装的分页组件详解

小云云
发布： 2018-01-06 10:05:11
原创
1539人浏览过

由于项目需要实现分页效果，上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=&#39;<p class="page">&#39;+
  &#39;<span class="page_details">&#39;+
  &#39;共<span class="page_num">&#39;+this.settings.totalLists+&#39;</span>条记录，&#39;+
  &#39;第<span class="page_current">&#39;+curPage+&#39;</span>/&#39;+
  &#39;<span class="page_size">&#39;+this.settings.totalPages+&#39;</span>页&#39;+
  &#39;</span>&#39;+
  &#39;<p class="page_to">&#39;+
  &#39;<ul class="flex_parent">&#39;+
  &#39;<li class="page_first flex_child">首页</li>&#39;+
  &#39;<li class="page_pre page_hide flex_child">« 上一页</li>&#39;+
  &#39;<li class="page_next flex_child">下一页 »</li>&#39;+
  &#39;<li class="page_last flex_child">末页</li>&#39;+
  &#39;</ul>&#39;+
  &#39;</p>&#39;+
  &#39;<p class="page_jump">&#39;+
  &#39;<span>第：<input type="number" class="page_jump_input" value="&#39;+this.settings.inputVal+&#39;">页</span>&#39;+
  &#39;<input type="button" class="page_jump_btn" value="Go">&#39;+
  &#39;</p>&#39;+
  &#39;</p>&#39;;
  $(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(&#39;跳转的页数：&#39;+jumpVal+&#39;;跳转之前的页数：&#39;+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:&#39;.page&#39;,//容器：默认page
  //setPos:&#39;body&#39;,//放置位置：默认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封装placeholder的实例代码

基于jquery封装的一个js分页_jquery

jquery封装的对话框简单实现_jquery

以上就是jQuery封装的分页组件详解的详细内容，更多请关注php中文网其它相关文章！

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
我要提问
来源：php中文网
收藏 点赞
上一篇：jQuery的选中方法 下一篇：jQuery Form实现Ajax上传文件同时设置headers详解
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
P粉722478067来自于2024-04-19 15:37:47
0 0 19
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');  &nb...
P粉722478067来自于2024-04-18 23:52:34
0 0 40
关于CSS思维导图的课件在哪？ 课件
凡人来自于2024-04-16 10:10:18
0 0 129
PX自动转换为REM错误  <style>html {   font-size: calc(100vw / 3.75);      }...
凡人来自于2024-04-16 09:34:16
0 0 767
PHP数组从URL参数中获取的行为不如预期 我有一个包含类别ID的URL参数，我想将其视为一个数组，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它从URL参数获取数组：$catI...
P粉785905797来自于2024-04-06 22:09:02
0 1 438
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
P粉738046172来自于2024-04-06 22:01:35
0 2 317
我应该在 apache 中哪里放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用运行状况检查url登录访问日志。基于此链接，他们提到了有关修改Customlog指令的信息。我不是关于需要更改Cust...
P粉573809727来自于2024-04-06 22:03:59
0 1 442
返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
P粉757556355来自于2024-04-06 21:55:20
0 1 266
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
P粉771233336来自于2024-04-06 21:58:04
0 1 357
如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
P粉970736384来自于2024-04-06 21:28:37
0 1 1863
相关专题
更多>
热门推荐
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部