后台返回所有数据，前端处理分页

 

//jquery.page.js

/* 
*page plugin 1.0   2016-09-29 by cary
*/
(function ($) {
  //默认参数
  var defaults = {
    totalPages: 9,//总页数
    liNums: 9,//分页的数字按钮数(建议取奇数)
    activeClass: 'active' ,//active类
    firstPage: '首页',//首页按钮名称
    lastPage: '末页',//末页按钮名称
    prv: '«',//前一页按钮名称
    next: '»',//后一页按钮名称
    hasFirstPage: true,//是否有首页按钮
    hasLastPage: true,//是否有末页按钮
    hasPrv: true,//是否有前一页按钮
    hasNext: true,//是否有后一页按钮
    callBack : function(page){
        //回掉，page选中页数
    }
  };

  //插件名称
  $.fn.Page = function (options) {
    //覆盖默认参数
    var opts = $.extend(defaults, options);
    //主函数
    return this.each(function () {
      var obj = $(this);
      var l = opts.totalPages;
      var n = opts.liNums;
      var active = opts.activeClass;
      var str = '';
      var str1 = '
1
';
      if (l > 1&&l < n+1) {
        for (i = 2; i < l + 1; i++) {
          str += '
' + i + '
';
        }
      }else if(l > n){
        for (i = 2; i < n + 1; i++) {
          str += '
' + i + '
';
        }
      }
      var dataHtml = '';
      if(opts.hasNext){
          dataHtml += '
' + opts.next + '
';
      }
      if(opts.hasLastPage){
          dataHtml += '
' + opts.lastPage + '
';
      }
          dataHtml += '
' + str1 + str + '
';
      if(opts.hasFirstPage){
          dataHtml += '
' + opts.firstPage + '
';
      }
      if(opts.hasPrv){
          dataHtml += '
' + opts.prv + '
';
      }
      
      obj.html(dataHtml).off("click");//防止插件重复调用时，重复绑定事件
      
      obj.on('click', '.next', function () {
        var pageshow = parseInt($('.' + active).html());
        var nums,flag;
        var a = n % 2;
        if(a == 0){
          //偶数
          nums = n;
          flag = true;
        }else if(a == 1){
          //奇数
          nums = (n+1);
          flag = false;
        }
        if(pageshow >= l) {
          return;
        }else if(pageshow > 0&&pageshow <= nums/2){
          //最前几项
          $('.' + active).removeClass(active).parent().next().find('a').addClass(active);
        }else if((pageshow > l-nums/2&&pageshow < l&&flag==false)||(pageshow > l-nums/2-1&&pageshow < l&&flag==true)){
          //最后几项
          $('.' + active).removeClass(active).parent().next().find('a').addClass(active);
        }else{
          $('.' + active).removeClass(active).parent().next().find('a').addClass(active);
          fpageShow(pageshow+1);
        }
        opts.callBack(pageshow+1);
      });
      obj.on('click', '.prv', function () {
        var pageshow = parseInt($('.' + active).html());
        var nums = odevity(n);
        if (pageshow <= 1) {
            return;
        }else if((pageshow > 1&&pageshow <= nums/2)||(pageshow > l-nums/2&&pageshow < l+1)){
          //最前几项或最后几项
          $('.' + active).removeClass(active).parent().prev().find('a').addClass(active);
        }else {
          $('.' + active).removeClass(active).parent().prev().find('a').addClass(active);
          fpageShow(pageshow-1);
        }
        opts.callBack(pageshow-1);
      });

      obj.on('click', '.first', function(){
        var activepage = parseInt($('.' + active).html());
        if (activepage <= 1){
          return
        }//当前第一页
        opts.callBack(1);
        fpagePrv(0);
      });
      obj.on('click', '.last', function(){
        var activepage = parseInt($('.' + active).html());
        if (activepage >= l){
          return;
        }//当前最后一页
        opts.callBack(l);
        if(l>n){
          fpageNext(n-1);
        }else{
          fpageNext(l-1);
        }
      });

      obj.on('click', 'li', function(){
        var $this = $(this);
        var pageshow = parseInt($this.find('a').html());
        var nums = odevity(n);
        opts.callBack(pageshow);
        if(l>n){
          if(pageshow > l-nums/2&&pageshow < l+1){
            //最后几项
            fpageNext((n-1)-(l-pageshow));
          }else if(pageshow > 0&&pageshow < nums/2){
            //最前几项
            fpagePrv(pageshow-1);
          }else{
            fpageShow(pageshow);
          }
        }else{
          $('.' + active).removeClass(active);
          $this.find('a').addClass(active);
        }
      });

          //重新渲染结构
        /*activePage 当前项*/
        function fpageShow(activePage){
          var nums = odevity(n);
          var pageStart = activePage - (nums/2-1);
          var str1 = '';
          for(i=0;i'
          }
          obj.find('ul').html(str1);
          obj.find('ul li').eq(nums/2-1).find('a').addClass(active);
        }
        /*index 选中项索引*/
        function fpagePrv(index){
          var str1 = '';
          if(l>n-1){
            for(i=0;i'
            }
          }else{
            for(i=0;i'
            }
          }
          obj.find('ul').html(str1);
          obj.find('ul li').eq(index).find('a').addClass(active);
        }
        /*index 选中项索引*/
        function fpageNext(index){
          var str1 = '';
          if(l>n-1){
            for(i=l-(n-1);i'
            }
           obj.find('ul').html(str1);
           obj.find('ul li').eq(index).find('a').addClass(active);
          }else{
            for(i=0;i'
            }
           obj.find('ul').html(str1);
           obj.find('ul li').eq(index).find('a').addClass(active);
          }
        }
        //判断liNums的奇偶性
        function odevity(n){
          var a = n % 2;
          if(a == 0){
            //偶数
            return n;
          }else if(a == 1){
            //奇数
            return (n+1);
          }
        }
    });
  }
})(jQuery);

//jquery.page.css

@charset "utf-8";
/*样式参考*/
a {
    text-decoration: none;
}

#page {
    height: 50px;
    display: table;

}

.page {
    text-align: center;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.pagingUl {
    float: right;
    padding: 0;
    margin: 0;
    list-style: none;
    height: 30px;
}

.pagingUl li {
    float: left;
    width: 30px;
    height: 30px;
    background: #fff;
    text-align: center;
    margin-right: 5px;
    border-radius: 5px
}

.pagingUl li a {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    color: #666;
    font-size: 12px;
    border-radius: 5px
}

.prv,
.next {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    background: #fff;
    padding: 0 5px;
    border-radius: 5px;
}

.prv {
    margin-right: 10px;
}

.first,
.last {
    width: 30px;
    height: 30px;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    /*border: 1px solid #ddd;*/
    cursor: pointer;
    background: #fff;
    padding: 0 5px;
    border-radius: 5px;
    margin-right: 10px;
}

.prv:hover,
.next:hover,
.first:hover,
.last:hover,
.pagingUl li a:hover,
.activP {
    background-color:#deeffa!important;
    color: #0098e1!important;
}