jquery.page2.js

jquery.page2.js

 

1.引入头文件，详细使用方式参见http://127.0.0.1:8080/default/xshdbx/welcome.jsp：
<script src="js/jquery.page2.js"></script>
2.//使用
$(function() {
    // 分页器
    $("#page").Page({
      totalPages: 3, //分页总数
      liNums: 7, //分页的数字按钮数(建议取奇数)
      activeClass: 'activP', //active 类样式定义
      nowPage:3,
      callBack: function(page) {
      }
    });
});

注意：jquery.page2.js  比jquery.page.js 多一个参数：nowPage。更能适应当
页面跳转时，发现后台因为用户的增删改查引起，页面总数，当前页发生变化的情况。

 

/*
 *page plugin 1.0   2016-09-29 by cary
 */
(function($) {
  //默认参数
  var defaults = {
    totalPages: 9, //总页数
    liNums: 9, //分页的数字按钮数(建议取奇数)
    nowPage:1,
    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 = '<li><a href="javascript:" class="' + active + '">1</a></li>';
      if (l > 1 && l < n + 1) {
        for (i = 2; i < l + 1; i++) {
          str += '<li><a href="javascript:">' + i + '</a></li>';
        }
      } else if (l > n) {
        for (i = 2; i < n + 1; i++) {
          str += '<li><a href="javascript:">' + i + '</a></li>';
        }
      }
      var dataHtml = '';
      if (opts.hasNext) {
        dataHtml += '<div class="next fr">' + opts.next + '</div>';
      }
      // if (opts.hasLastPage) {
      //   dataHtml += '<div class="last fr">' + opts.lastPage + '</div>';
      // }
      dataHtml += '<ul class="pagingUl">' + str1 + str + '</ul>';
      // if (opts.hasFirstPage) {
      //   dataHtml += '<div class="first fr">' + opts.firstPage + '</div>';
      // }
      if (opts.hasPrv) {
        dataHtml += '<div class="prv fr">' + opts.prv + '</div>';
      }

      obj.html(dataHtml).off("click"); //防止插件重复调用时，重复绑定事件
      if(opts.nowPage !=1){
            var pageshow=opts.nowPage;
            var nums = odevity(n);
            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 {
               fpagePrv(pageshow - 1);
            }
            
          
      }

      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);
         return;
      });

      obj.on('click', '.first', function() {
        var activepage = parseInt($('.' + active).html());
        if (activepage <= 1) {
          return
        } //当前第一页
        opts.callBack(1);
        return;
        fpagePrv(0);
      });
      obj.on('click', '.last', function() {
        var activepage = parseInt($('.' + active).html());
        if (activepage >= l) {
          return;
        } //当前最后一页
        opts.callBack(l);
         return;
        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);
          return;
      
        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 < n; i++) {
          str1 += '<li><a href="javascript:" class="">' + (pageStart + i) + '</a></li>'
        }
        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 < n; i++) {
            str1 += '<li><a href="javascript:" class="">' + (i + 1) + '</a></li>'
          }
        } else {
          for (i = 0; i < l; i++) {
            str1 += '<li><a href="javascript:" class="">' + (i + 1) + '</a></li>'
          }
        }
        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 < l + 1; i++) {
            str1 += '<li><a href="javascript:" class="">' + i + '</a></li>'
          }
          obj.find('ul').html(str1);
          obj.find('ul li').eq(index).find('a').addClass(active);
        } else {
          for (i = 0; i < l; i++) {
            str1 += '<li><a href="javascript:" class="">' + (i + 1) + '</a></li>'
          }
          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);