jquery分页组件

我自己写了一个分页的组件，供大家参考，如下图：只会显示五个页码。

 具体代码如下：

html部分

<div class="page">
  <a href="javascript:;" class="page_btn left_btn">&#8249;</a>
  <div class="btns">

  </div>
  <a href="javascript:;" class="page_btn right_btn">&#8250;</a>
  <div class="selected">
    <div class="value"></div>
    <div class="list">
      <ul>
        <li>10 / page</li>
        <li>15 / page</li>
        <li>20 / page</li>
      </ul>
    </div>
  </div>
</div>

css部分

 a{
      text-decoration: none;
    }
    .page {
      display: flex;
    }
    .btns {
      display: flex;
    }
    .page_btn {
      width: 32px;
      height: 32px;
      background: #FFFFFF;
      border: 1px solid #D9D9D9;
      box-sizing: border-box;
      border-radius: 2px;
      color: rgba(0, 0, 0, 0.65);
      text-align: center;
      line-height: 32px;
      margin-right: 8px;
      cursor: pointer;
    }
    .cur_page {
      color: #F96C21;
      border: 1px solid #F96C21;
    }
    .selected {
      width: 104px;
      height: 32px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .value {
      width: 104px;
      height: 32px;
      font-family: Roboto;
      font-style: normal;
      font-weight: normal;
      font-size: 14px;
      line-height: 30px;
      /* identical to box height, or 214% */

      color: rgba(0, 0, 0, 0.65);
      border: 1px solid #D9D9D9;
      border-radius: 2px;
      padding-left: 12px;
      box-sizing: border-box;
      position: relative;
      line-height: 30px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .value > span:first-child {
      position: absolute;
      z-index: 0;
    }
    /*下拉框图标*/
    .value:after {
      content: '';
      position: absolute;
      width: 12px;
      height: 12px;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: url("icon.svg") no-repeat center;
    }
    .list {
      width: 104px;
      border-radius: 2px;
      position: absolute;
      border: 1px solid #D9D9D9;
      background: #fff;
      right: 0;
      top: 34px;
      box-sizing: border-box;
      display: none;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    ul li {
      list-style: none;
      width: 100%;
      height: 32px;
      line-height: 32px;
      box-sizing: border-box;
      padding-left: 12px;
      cursor: pointer;
    }

    ul li:hover {
      background: #f3f3f3;
    }

    .choose {
      background: #f3f3f3;
      color: #57a3f3;
    }
    input{
      outline: none;
      width: 32px;
      text-align: center;
      border: 1px solid #D9D9D9;
      margin-right: 8px;
    }
    .totalPage {
      height: 32px;
      line-height: 32px;
      margin-right: 8px;
    }

js部分

 let data_ = {
    page:1,//页码，从1开始
    page_size:10,//每页数量
  }
  class Pagination {
    constructor({jump, count, data} = {}) {
      this.count = count
      if(jump) {
        $('.page .selected').before('<input value="1" />')
        this.jumpPage()
      }
      if(count){
        $('.page .selected').before('<div class="totalPage">共<span></span>页</div>')
      }
      this.getData(data)
    }
    init(){
      $('.page .btns').children().eq(0).addClass('cur_page')
      $('ul li:first-child').addClass('choose')
      let val_ = $('ul li:first-child').text()
      $('.value').text(val_);
     this._pageChange()
      this.event()
    }
    //获取分页数据
    async getData(data_){
      // const {data,pagination} = await $.ajax({
      //   url:'',
      //   method:'post',
      //   data:data_
      // })
      let pagination = {
        total:101,
        page: 1,
        page_size: 10
      }
      this.renderPage(pagination)
      this.init()
    }
    //渲染页码
    renderPage(data) {
      let page_num = Math.ceil(data.total/data.page_size)
      for (let i = 1; i <= page_num; i++){
        $('.page .btns').append(`<div class="page_btn">${i}</div>`)
      }
      if(this.count){
        this.renderCount(page_num)
      }
    }
    renderCount(count){
      $('.totalPage span').text(count)
    }
    //跳页
    jumpPage(){
      const that = this
      $('.page input').on('change',function (e){
        let page = e.target.value;
        if(Number(page)){
          $(this).parents('.page').find('.btns').children().removeClass('cur_page')
          $(this).parents('.page').find('.btns').children().eq(page - 1).addClass('cur_page')
          that._pageChange()
        }
      })
    }
    event(){
      //page_size
      const that = this
      $('.value').on('click',function (){
        $(this).next().toggle()
      })
      $('ul').on('click','li',function (){
        $(this).siblings().removeClass('choose')
        $(this).addClass('choose')
        let val = $(this).text()
        $(this).parents('.list').prev().text(val);
        $(this).parents('.list').hide()
        $('.page .btns .page_btn').removeClass('cur_page')
        $('.page .btns .page_btn:first-child').addClass('cur_page')
        that._pageChange()
      })
      //点击空白处隐藏选项
      $(document).click(function(event){
        const _con = $(".selected");   // 设置点击失效目标区域
        if(!_con.is(event.target) && _con.has(event.target).length === 0){
          $(".selected .list").hide()
        }
      });
      //分页事件
      $('.page .right_btn').on('click',function (){
        if(!$(this).prev().children(':last-child').hasClass('cur_page')){
          let cur = $(this).prev().find('.cur_page')
          cur.removeClass('cur_page')
          cur.next().addClass('cur_page')
          let index = cur.next().text()
          console.log(index);
        }
        that._pageChange()
      })
      $('.page .left_btn').on('click',function (){
        if(!$(this).next().children(':first-child').hasClass('cur_page')){
          let cur = $(this).next().find('.cur_page')
          cur.removeClass('cur_page')
          cur.prev().addClass('cur_page')
          let index = cur.prev().text()
          console.log(index);
        }
        that._pageChange()

      })
      $('.page .btns').on('click','.page_btn',function (){
        $(this).parent().children().removeClass('cur_page')
        $(this).addClass('cur_page')
        let index = $(this).text()
        console.log(index);
        that._pageChange()

      })
    }
    _pageChange(){
      let curr = $('.page .btns').find('.cur_page').index()
      $('.page .btns').children().hide()
      $('.page .btns').find('.cur_page').show()
      if(curr-4 > -1) {
        if($('.page .btns').children().length - curr < 3 ){
          $('.page .btns').children().eq(curr-4).show()
        }
      }
      if(curr-3 > -1) {
        if($('.page .btns').children().length - curr < 2 ) {
          $('.page .btns').children().eq(curr-3).show()
        }
      }
      if(curr-2 > -1) {
        $('.page .btns').children().eq(curr-2).show()
      }
      if(curr-1 > -1) {
        $('.page .btns').children().eq(curr-1).show()
      }
      if(curr + 1 < $('.page .btns').children().length) {
        $('.page .btns').children().eq(curr + 1).show()
      }
      if(curr + 2 < $('.page .btns').children().length) {
        $('.page .btns').children().eq(curr + 2).show()
      }
      if(curr + 3 < $('.page .btns').children().length) {
        if(curr < 2){
          $('.page .btns').children().eq(curr + 3).show()
        }
      }
      if(curr + 4 < $('.page .btns').children().length) {
        if(curr < 1) {
          $('.page .btns').children().eq(curr + 4).show()
        }
      }
    }
  }

  new Pagination({
    jump:true,
    count:true,
    data:data_
  })

getData方法里面可以发送ajax请求，获取分页数据：页码，每页显示条数，总条数
jump，count参数用来是否显示跳转页面和总页数模块，

_pageChange()方法用来控制只显示五个页码，

event是页码变化的方法