html+jquery 实现前端分页控件

写此控件因开发需求在拿打包后的项目；之前是前后端不分离，在这基础上抽离出来；调取Java接口；加分页控件；

手撸，参照elementUI； 点击事件使用委托模式实现

先上图：

参照物：

<div id="xu-paging" class="works_paging row">
      <div class="works_paging_flex">
            <button class="retreatBtn"> < </button>
            <ul class="pagingList"></ul>
            <button class="advanceBtn"> > </button>
      </div>
</div>

button是前进、后退按钮

ul里是要插入的每一个页数按钮，从后端请求回来数据，循环创建li插入ul里。

function getPaging(length) {
  if(length > 1) {
    $('.pagingList').empty();
    if(length > 7) {
      for(var i = 1; i <= 7; i++) {
        let li = `<li>`+ i +`</li>`;
        $('.pagingList').append(li)
        $('.pagingList li').eq(presentPagingNum - 
         1).addClass('active').siblings().removeClass('active');
      }
      let liEnd = `<li>`+ length +`</li>`;
      $('.pagingList li').eq($('.pagingList li').length - 1).after(liEnd);
      let liEndShrink = `<li>...</li>`;
      $('.pagingList li').eq($('.pagingList li').length - 1).before(liEndShrink);
      $('.pagingList').on('click', function(ev) {
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'li' && $(target).html() != '...') {
          if(presentPagingNum != $(target).html()) {
            presentPagingNum = $(target).html();
            pagingRules(presentPagingNum, length);
            getCardList(pageSort, pageType, search, presentPagingNum);
          }
        }
      })
    } else {
      for(var i = 1; i <= length; i++) {
        let li = `<li>`+ i +`</li>`;
        $('.pagingList').append(li)
        $('.pagingList li').eq(presentPagingNum - 
         1).addClass('active').siblings().removeClass('active');
      }
      $('.pagingList li').on('click', function(e) {
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        presentPagingNum = $(target).html();
        pagingRules(presentPagingNum, length)
        getCardList(pageSort, pageType, search, presentPagingNum);
      })
    }
  }
}

此方法是循环创建li,每一个页数按钮；$.().empty()是我的页面中有分页导航，切换时先清空当前的li,重新创建，防止追加；

如果分页数没超过7,直接列出；如果超过7那就在点击超过5就要前后改为省略号；

function pagingRules(target, length) {
  if(length > 7) {
    //如果点击小于6之前的按钮样式不变
    if(target < 6) {
      $('.pagingList').empty();
      for(var i = 1; i <= 7; i++) {
        let li = `<li>`+ i +`</li>`;
        $('.pagingList').append(li)
      }
      let liEnd = `<li>`+ length +`</li>`;
      $('.pagingList li').eq($('.pagingList li').length - 1).after(liEnd);
      let liEndShrink = `<li>...</li>`;
      $('.pagingList li').eq($('.pagingList li').length - 1).before(liEndShrink);
      $('.pagingList li').eq(target - 
        1).addClass('active').siblings().removeClass('active');
    } else {
      if(length - target > 4) {
        const thisNum = parseInt(target);
        $('.pagingList li').eq(1).html('...')
        $('.pagingList li').eq(4).html(thisNum)
        $('.pagingList li').eq(4).addClass('active').siblings().removeClass('active');
        $('.pagingList li').eq(2).html(thisNum-2);
        $('.pagingList li').eq(3).html(thisNum-1);
        $('.pagingList li').eq(5).html(thisNum+1);
        $('.pagingList li').eq(6).html(thisNum+2);
        $('.pagingList li').eq(7).html('...')
      } else {
        const thisNum = parseInt(target);
        $('.pagingList li').eq(1).html('...');
        $('.pagingList li').eq(2).html(length - 6);
        $('.pagingList li').eq(3).html(length - 5);
        $('.pagingList li').eq(4).html(length - 4);
        $('.pagingList li').eq(5).html(length - 3);
        $('.pagingList li').eq(6).html(length - 2);
        $('.pagingList li').eq(7).html(length - 1);
        $('.pagingList li').eq(8).html(length);
        for(var i = 0; i < $('.pagingList li').length; i++) {
          if(thisNum == $('.pagingList li').eq(i).html()) {
            $('.pagingList 
             li').eq(i).addClass('active').siblings().removeClass('active');
          }
        }
      }
    }
  } else {
    $('.pagingList li').eq(target - 
      1).addClass('active').siblings().removeClass('active');
  }
}

两个参数 是当前触发按钮对应的数字 和 总页数；

以下是前后按钮的方法：

//分页前进按钮
$('.advanceBtn').on('click', function() {
  if(presentPagingNum < pagingNum) {
    let result = ++presentPagingNum;
    pagingRules(result, pagingNum);
    getCardList(pageSort, pageType, search, result);
  }
})
//分页后退按钮
$('.retreatBtn').on('click', function() {
  if(presentPagingNum > 1) {
    let result = --presentPagingNum;
    pagingRules(result, pagingNum);
    getCardList(pageSort, pageType, search, result);
  }
})

presentPagingNum //当前分页按钮选中的数

pagingNum //分页总页数

css也搬上来：

.works_paging .works_paging_flex{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  padding-top: 50px;
}
.works_paging .pagingList {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.works_paging button,
.works_paging .pagingList li {
  display: inline-block;
  min-width: 30px;
  margin: 0 5px;
  padding: 0 4px;
  background-color: #f4f4f5;
  border-radius: 2px;
  color: #606266;
  vertical-align: top;
  font-size: 13px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}
.works_paging .pagingList li.active {
  background-color: #409eff;
  color: #fff;
}

 

本人比较`粗糙`，哪里没看明白，欢迎提问，乐此不疲！