最实用的jQuery分页插件,从零开始做一个pagination分页组件

主要的实现有两个函数,要经历 分析 =&gt

在做商城和订单管理的时候,常常会用到分页功能,所以我封装了一个jQuery的分页插件,该插件主要实现上下翻页,输入数字跳转等功能。

开始一个组件,毫无目的的写代码是一个不好的习惯,要经历 分析 => 抽象
=> 实现 => 应用 四个阶段。

图片 1

组件DEMO地址:

具体实现如下:

分析需求

输入参数需要当前页码pageNo,总页码totalPage,回调函数callback。

当前页码显示前后三页,以及在两端显示上一页、下一页

主要的实现有两个函数,一个是根据当前页和总页数生成相应的html的代码,一个是事件绑定及回调函数的执行。

未显示的地方用 ‘…’代替

creatHtml函数:

举个栗子:

creatHtml:function(){
 var me=this;
 var content="";
  //当前页码
 var current=me.options.pageNo;
  //总页码
 var total=me.options.totalPage;
  //当前页码大于1显示向上翻页按钮
 if(current > 1){
 content += "<a><</a>";
 }
  //总页数大于7,根据当前页显示省略号,否则显示全部页码
 if(total > 7){
 if(current < 4){
  for(var i=1;i<7;i++){
  if(current==i){
   content += "<a class='current'>"+i+"</a>";
  }else{
   content += "<a>"+i+"</a>";
  }
  }
  content += "...";
  content += "<a>"+total+"</a>";
 }else{
  if(current < total - 3){
  content += "<a name='1' type='button' class='page num'>1</a>";
  content += "...";
  for(var i=current-2;i<current+3;i++){
   if(current==i){
   content += "<a class='current'>"+i+"</a>";
   }else{
   content += "<a>"+i+"</a>";
   }
  }
  content += "...";
  content += "<a>"+total+"</a>";
  }else{
  content += "<a>1</a>";
  content += "...";
  for(var i=total-5;i<total+1;i++){
   if(current==i){
   content += "<a class='current'>"+i+"</a>";
   }else{
   content += "<a>"+i+"</a>";
   }
  }
  }
 }
 }else{
 for(var i=1;i<total+1;i++){
  if(current==i){
  content += "<a class='current'>"+i+"</a>";
  }else{
  content += "<a>"+i+"</a>";
  }
 }
 }
  //当前页小于总页数,显示向下翻页按钮
 if(current < total){
 content += "<a>></a>";
 }
  //输入跳转
 content += " 到第 ";
 content += "<input max='3' maxlength='3' value='"+current+"' type='text' />";
 content += " 页 ";
 content += "<a>Go</a>";
  //更新HTML
 me.element.html(content);
}

假设总共有30页

bindEvent函数:

当前为第一页:1 2 3 4 … 30 下一页

bindEvent:function(){
 var me=this;
  //分页点击事件
 me.element.on('click','a',function(){
 var num=$(this).html();
 if(num=="<"){//上翻
  me.options.pageNo=+me.options.pageNo-1;
 }else if(num==">"){//下翻
  me.options.pageNo=+me.options.pageNo+1;
 }else if(num=="Go"){//输入页码跳转
  var ipt=+me.element.find('input').val();
  if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){
  me.options.pageNo=ipt;
  }
 }else{//直接跳转
  me.options.pageNo=+num;
 }
    //更新html
 me.creatHtml();
    //调用回调函数,返回当前页码
 if(me.options.callback){
  me.options.callback(me.options.pageNo);
 }
 });
}

当前为第二页:上一页 1 2 3 4 5 … 30 下一页

将函数封装起来,完整如下:

当前为第三页:上一页 1 2 3 4 5 6 … 30 下一页
.

;(function($,window,document,undefined){
 var initDate={
 pageNo:1,
 totalPage:1,
 callback:function(){}
 };
 function Paging(element,options){
 this.element = element;
 this.options=options=$.extend(initDate,options||{});
 this.init();
 }
 Paging.prototype={ 
 constructor:Paging,
 init:function(){
  this.creatHtml();
  this.bindEvent();
 },
 creatHtml:function(){
  var me=this;
  var content="";
  var current=me.options.pageNo;
  var total=me.options.totalPage;
  if(current > 1){
  content += "<a><</a>";
  }
  if(total > 7){
  if(current < 4){
   for(var i=1;i<7;i++){
   if(current==i){
    content += "<a class='current'>"+i+"</a>";
   }else{
    content += "<a>"+i+"</a>";
   }
   }
   content += "...";
   content += "<a>"+total+"</a>";
  }else{
   if(current < total - 3){
   content += "<a name='1' type='button' class='page num'>1</a>";
   content += "...";
   for(var i=current-2;i<current+3;i++){
    if(current==i){
    content += "<a class='current'>"+i+"</a>";
    }else{
    content += "<a>"+i+"</a>";
    }
   }
   content += "...";
   content += "<a>"+total+"</a>";
   }else{
   content += "<a>1</a>";
   content += "...";
   for(var i=total-5;i<total+1;i++){
    if(current==i){
    content += "<a class='current'>"+i+"</a>";
    }else{
    content += "<a>"+i+"</a>";
    }
   }
   }
  }
  }else{
  for(var i=1;i<total+1;i++){
   if(current==i){
   content += "<a class='current'>"+i+"</a>";
   }else{
   content += "<a>"+i+"</a>";
   }
  }
  }
  if(current < total){
  content += "<a>></a>";
  }
  content += " 到第 ";
  content += "<input max='3' maxlength='3' value='"+current+"' type='text' />";
  content += " 页 ";
  content += "<a>Go</a>";
  me.element.html(content);
 },
 bindEvent:function(){
  var me=this;
  me.element.on('click','a',function(){
  var num=$(this).html();
  if(num=="<"){
   me.options.pageNo=+me.options.pageNo-1;
  }else if(num==">"){
   me.options.pageNo=+me.options.pageNo+1;
  }else if(num=="Go"){
   var ipt=+me.element.find('input').val();
   if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){
   me.options.pageNo=ipt;
   }
  }else{
   me.options.pageNo=+num;
  }
  me.creatHtml();
  if(me.options.callback){
   me.options.callback(me.options.pageNo);
  }
  });
 }
 };
 $.fn.paging=function(options){
 options=$.extend(initDate,options||{});
 return new Paging($(this),options);
 }
})(jQuery,window,document);

当前为第6页:上一页 1 … 3 4 5 6 7 8 9 … 30 下一页
.

HTML:

当前为第29页:上一页 1 … 26 27 28 29 30 下一页

<div id=”page”></div>

当前为第30页:上一页 1 … 27 28 29 30

js引用:

抽象

$('#page').paging({pageNo:2,totalPage:10,callback:function(cur){
 console.log(‘当前页:'+cur);//当前页:2
}});

分析上面的例子,发现决定输出的因素有两个:当前页码和总页数。

这里加了一些简单的样式,可以根据具体的ui设计来设计样式。

于是,我们设定一个函数用来表示当前页码的显示内容:

 <style type="text/css">
 a{
 width: 23px;
 height: 23px;
 border: 1px solid #dce0e0;
 text-align: center;
 margin: 0 4px;
 cursor: pointer;
 display: inline-block;
 }
 .current{
 background-color: #5ac3e7;
 }
 </style>
/**
 * @param {Number} page 当前页
 * @param {Number} totalPage 总页数 
 */
function pagination(page, totalPage) {
  var str = '';
  // todo...

  return str;
}

// 运行函数,打印出值

var ret = pagination(4, 30)

console.log(ret)

github地址:

>上一页 1 2 3 4 5 6 7 … 30 下一页

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

实现

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

输入和输出都有了,接着正式开始撸:

您可能感兴趣的文章:

  • jQuery Pagination
    Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
  • jquery分页插件jquery.pagination.js使用方法解析
  • 一款Jquery
    分页插件的改造方法(服务器端分页)
  • Jquery 分页插件之Jquery
    Pagination
  • 分享一个自己动手写的jQuery分页插件
  • 基于bootstrap3和jquery的分页插件
  • asp.net
    jquery无刷新分页插件(jquery.pagination.js)
  • jQuery
    ajax分页插件实例代码
  • Ajax分页插件Pagination从前台jQuery到后端java总结
  • 快速掌握jquery分页插件jqPaginator的使用方法
function pagination(page, totalPage) {
  var str = page;
  // 这里实现当前页面显示前后三项功能
  for(var i=1; i< totalPage; i++) {
    if(page-i>1) {
      str = page-i +' '+ str;
    }
    if(page + i < totalPage) {
      str = str + ' ' + (page+i)
    }
  }

  // 以page为中心,向左右扩展

  // 向左,先判断当前page向左的第四个数是否大于 1
  if(page-4 > 1) {
    str = '... ' + page;
  }
  // 继续向左判断
  if(page >1) {
    str = "上一页" + '... ' +1 +' ' +str;
  }
  // 向右,判断当前page向右的第四个数字是否小于 totalPage
  if(page + 4 < totalPage) {
    str = '... '+ str;
  }
  if(page < totalPage) {
    str = str +' ' + totalPage +' '+ '下一页';
  }
  return str;
}

现在,我们可以执行下面的函数,取得我们想要的结果:

  var total = 30;
  for(var i = 1; i< total; i++) {
   var ret = showPage(i, total);
   console.log(ret)
  }

至此,我们已经实现了分页的逻辑。

应用

接下来的应用就非常简单了,不外乎是给str
加一些标签和class,于是我们就得到了一个分页组件:

HTML:

<ul id="pagination-list" class="clearfix2">

</ul>

javascript:

  function pagination(page, totalPage) {
    var str = '<li class="page-active">'+page+'</li>';
    for(var i=1; i<=3; i++) {
      if(page - i > 1) {
        str = '<li class="page-item">'+(page-i)+'</li>' +' '+ str;
      }
      if(page + i < totalPage) {
        str = str +" "+'<li class="page-item">'+(page+ i)+'</li>'
      }
    }
    if(page-4 >1) {
      str = '<li class="page-item">... </li>' +str;
    }
    if (page >1) {
      str= '<li class="page-up">上一页</li>'+ ' '+'<li class="page-item">1</li>' +' '+ str;
    }

    if(page+4< totalPage) {
      str = str+ '<li class="page-item"> ...</li>';
    }
    if(page < totalPage) {
      str = str + " " +'<li class="page-item">'+totalPage+'</li>' +" " +'<li class="page-down">下一页</li>'
    }
    return str;
  }
  var totalPage = 30;

  var str = pagination(1, totalPage);
  var wrap = $("#pagination-list");
  // 这里引用了 jQuery
  wrap.html(str)
    .on('click', '.page-item', function () {
      var cur = parseInt($(this).text());
      wrap.html(pagination(cur, totalPage));
    });

看看效果吧:

图片 2

目前来说,进展顺利,但是!还有很多需要优化的地方:样式固定,不能自由更改;初始化和交互混杂在一起,没有对代码进行封装…

又经过一番折腾,这个分页组件终于完成,下载demo:

现在,我们可以这样调用它:

<script>
  // #pagination-list 是组件的父容器,50 是总页数。
  $(function () {
    $("#pagination-list").pagination(50);
  })
</script>

是不是很酸爽呢?

如果继续扩展,我们还可以给组件更多的样式选择……

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

您可能感兴趣的文章:

  • jQuery EasyUI API 中文文档 –
    Pagination分页
  • jQuery Pagination
    Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
  • jquery
    pagination插件实现无刷新分页代码
  • jquery.pagination.js
    无刷新分页实现步骤分享
  • jquery分页插件jquery.pagination.js使用方法解析
  • Jquery 分页插件之Jquery
    Pagination
  • PHP框架Laravel插件Pagination实现自定义分页
  • jquery.pagination +JSON
    动态无刷新分页实现代码
  • jquery插件pagination实现无刷新ajax分页
  • asp.net
    jquery无刷新分页插件(jquery.pagination.js)