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

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

先上图：

参照物：

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

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

 

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