jQuery分页

.el-pagination {
  float: right;
  font-size: 13px;
  font-weight: 400;
  color: #606266;
}
.el-pagination,
.el-pager,
.el-pagination__jump {
  display: flex;
  align-items: center;
  padding: 0;
}
.page {
  display: flex;
  align-items: center;
  margin: 0px 10px;
  cursor: pointer;
}
.el-pagination ul {
  list-style: none;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: flex;
  justify-content: space-evenly;
}
.el-pagination ul li,
.page button {
  margin: 0px 5px;
  min-width: 22px;
  height: 30px;
  border-radius: 2px;
  border: none;
  background-color: #f4f4f5;
  color: #606266;
  font-weight: bold;
  padding: 0px 4px;

  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}
.el-pagination ul li:hover {
  color: #409eff;
}
.page button {
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.el-pagination .el-pager li:not(.disabled).active {
  background-color: #409eff;
  color: #fff;
}

.el-pagination__jump {
  margin-left: 20px;
}
.el-input {
  width: 50px;
  height: 30px;
  border: 1px solid #ccc;
  overflow: hidden;
  margin: 0px 6px;
}
.el-input__inner {
  width: 60px;
  height: 30px;
  border: none;
  outline: none;
  text-align: center;
}

          <div class="el-pagination">
            <span class="el-pagination__total">共 <span id="total"></span> 条</span>
            <div class="page">
              <button type="button" class="btn-prev" id="btnPrev"><</button>
              <ul class="el-pager">
                <!-- <li class="number active">1</li> -->
              </ul>
              <button type="button" class="btn-next" id="btnNext">></button>
            </div>
            <span class="el-pagination__jump">
              前往
              <div class="el-input">
                <input type="number" min="1" max="7" class="el-input__inner" id="pageNum"/>
              </div>
              页
            </span>
          </div>

  <script>
    $(document).ready(function () {
      var len =  125 //总条数
      var num = 10 //每一页5条数据
      var totalPage = Math.ceil(len / num) //总共有多少页
      var nownum = 0 //当前的页码，默认在第一页

      let i = 1
      let s = 1
      var page = totalPage < i + 8 ? totalPage + 1 : i + 8
      for (i; i < page; i++) {
        $('.el-pager').append(`<li class="number">${i}</li>`)
      }

      $('.el-pager li').eq(nownum).addClass('active')
      $('#total').text(len)

      $('.el-pager').on('click', 'li', function (e) {
        e.preventDefault()
        $(this).addClass('active').siblings('li').removeClass('active')
        nownum = $(this).index()
      })

      $('#btnNext').click(function () {
        if (nownum >= 7 ) {
            s++
            if(s + nownum > totalPage){
              return false
            }
            $('.el-pager').html(``)
            for (let i = s; i < 8 + s; i++) {
              $('.el-pager').append(`<li class="number">${i}</li>`)
            }
          } else {
            nownum++
          }
          $('.el-pager li')
            .eq(nownum)
            .addClass('active')
            .siblings('li')
            .removeClass('active')
      })

      $('#btnPrev').click(function () {
        if (nownum <= 0) {
          s--
          if(s <= 0){
            return false
          }
          $('.el-pager').html(``)
          for (let i = s; i < 8 + s && i > 0; i++) {

            $('.el-pager').append(`<li class="number">${i}</li>`)
          }
        } else {
          nownum--
        }

        $('.el-pager li')
            .eq(nownum)
            .addClass('active')
            .siblings('li')
            .removeClass('active')
      })
    })
  </script>