分页插件，直接把返回值赋过去即可

结构：
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      
      .page_div {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 15px;
        font-family: "microsoft yahei";
        color: #666666;
        margin-right: 10px;
        padding-left: 20px;
        box-sizing: border-box;
      }
      
      .page_div a {
        min-width: 30px;
        height: 28px;
        border: 1px solid #dce0e0!important;
        text-align: center;
        margin: 0 4px;
        cursor: pointer;
        line-height: 28px;
        color: #666666;
        font-size: 13px;
        display: inline-block;
      }
      
      #firstPage,
      #lastPage {
        width: 50px;
        color: #0073A9;
        border: 1px solid #0073A9!important;
      }
      
      #prePage,
      #nextPage {
        width: 70px;
        color: #0073A9;
        border: 1px solid #0073A9!important;
      }
      
      .page_div .current {
        background-color: #0073A9;
        border-color: #0073A9;
        color: #FFFFFF;
      }
      
      .totalPages {
        margin: 0 10px;
      }
      
      .totalPages span,
      .totalSize span {
        color: #0073A9;
        margin: 0 5px;
      }
    </style>
  </head>

  <body>
    <div id="page" class="page_div"></div>
  </body>
  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script type="text/javascript" src="js/paging.js"></script>
  <script>
    //分页
    $("#page").paging({
      pageNo: 5,
      totalPage: 9,
      totalSize: 300,
      callback: function(num) {
        alert(num)
      }
    })

    // 模拟ajax数据用以下方法，方便用户更好的掌握用法
    //参数为当前页
    ajaxTest(1);
    function ajaxTest(num) {
      $.ajax({
        url: "table.json",
        type: "get",
        data: {},
        dataType: "json",
        success: function(data) {
          console.log(data);
          //分页
          $("#page").paging({
            pageNo: num,
            totalPage: data.totalPage,
            totalSize: data.totalSize,
            callback: function(num) {
              ajaxTest(num)
            }
          })
        }
      })
    }
  </script>
</html>

　封装好的js:

(function($, window, document, undefined) {
  //定义分页类
  function Paging(element, options) {
    this.element = element;
    //传入形参
    this.options = {
      pageNo: options.pageNo || 1,
      totalPage: options.totalPage,
      totalSize: options.totalSize,
      callback: options.callback
    };
    //根据形参初始化分页html和css代码
    this.init();
  }
  //对Paging的实例对象添加公共的属性和方法
  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;
      var totalNum = me.options.totalSize;
      content += "<a id=\"firstPage\">首页</a><a id='prePage'>上一页</a>";
      //总页数大于6时候
      if(total > 6) {
        //当前页数小于5时显示省略号
        if(current < 5) {
          for(var i = 1; i < 6; 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) {
            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 - 4; i < total + 1; i++) {
              if(current == i) {
                content += "<a class='current'>" + i + "</a>";
              } else {
                content += "<a>" + i + "</a>";
              }
            }
          }
        }
        //页面总数小于6的时候
      } else {
        for(var i = 1; i < total + 1; i++) {
          if(current == i) {
            content += "<a class='current'>" + i + "</a>";
          } else {
            content += "<a>" + i + "</a>";
          }
        }
      }
      content += "<a id='nextPage'>下一页</a>";
      content += "<a id=\"lastPage\">尾页</a>";
      content += "<span class='totalPages'> 共<span>" + total + "</span>页 </span>";
      content += "<span class='totalSize'> 共<span>" + totalNum + "</span>条记录 </span>";
      me.element.html(content);
    },
    //添加页面操作事件
    bindEvent: function() {
      var me = this;
      me.element.off('click', 'a');
      me.element.on('click', 'a', function() {
        var num = $(this).html();
        var id = $(this).attr("id");
        if(id == "prePage") {
          if(me.options.pageNo == 1) {
            me.options.pageNo = 1;
          } else {
            me.options.pageNo = +me.options.pageNo - 1;
          }
        } else if(id == "nextPage") {
          if(me.options.pageNo == me.options.totalPage) {
            me.options.pageNo = me.options.totalPage
          } else {
            me.options.pageNo = +me.options.pageNo + 1;
          }

        } else if(id == "firstPage") {
          me.options.pageNo = 1;
        } else if(id == "lastPage") {
          me.options.pageNo = me.options.totalPage;
        } else {
          me.options.pageNo = +num;
        }
        me.creatHtml();
        if(me.options.callback) {
          me.options.callback(me.options.pageNo);
        }
      });
    }
  };
  //通过jQuery对象初始化分页对象
  $.fn.paging = function(options) {
    return new Paging($(this), options);
  }
})(jQuery, window, document);

下载地址：http://www.jq22.com/jquery-info15564

posted @ 2018-03-19 16:17  TigerZhang  阅读(231)  评论(0)    收藏  举报