SOURCE

let $page = $('#page');
let pageNow = 2
let total = 12
pageSet(total, pageNow);
$page.on("click", 'span', function (e) {
    switch (e.target.innerText) {
        case '首页':
            pageNow = 1
            break;
        case '末页':
            pageNow = total
            break
        case '上一页':
            pageNow = pageNow - 1
            break;
        case '下一页':
            pageNow = pageNow + 1
            break;
        default:
            pageNow = parseInt(e.target.innerText)
            break
    }
    pageSet(total, pageNow);
    // pageChange(e.target.innerText) // 调用页面的都要定义这个函数
})
$page.on("click", 'label', function (e) {
    let sign = e.target.innerText;
    if (sign === '»') {
        let i = pageNow + 5;
        if (i > total) pageNow = total
        else pageNow = i
    } else {
        let i = pageNow - 5
        if (i < 1) pageNow = 1
        else pageNow = i
    }
    pageSet(total, pageNow);
})
function pageSet(total, pageNow) {
    let i = 1, dom = '';
    let firstDisabled = pageNow === 1 ? 'disabled' : '';
    let endDisabled = pageNow === total ? 'disabled' : '';
    dom = `<span class="${firstDisabled} text">首页</span><span class="${firstDisabled} text">上一页</span>`;
    if (total < 10) {
        while (i < total || i === 1) {
            let active = pageNow === i ? 'active' : ''; dom += `<span
        class="${active}">${i}</span>`;
            i++;
        }
    } else {
        if (pageNow < 4) {
            while (i < 6) {
                let active = pageNow === i ? 'active' : ''; dom += `<span class="${active}">
            ${i}</span>`;
                i++;
            }
            dom += `<label title="向后5页">»</label><span>${total}</span>`;
        } else if (pageNow > 3 && pageNow < total - 3) {
            dom += `<span>1</span>`;
            dom += `<label title="向前5页">«</label>`;
            dom += `<span>${pageNow - 2}</span>`;
            dom += `<span>${pageNow - 1}</span>`;
            dom += `<span class="active">${pageNow}</span>`;
            dom += `<span>${pageNow + 1}</span>`;
            dom += `<span>${pageNow + 2}</span>`;
            dom += `<label title="向后5页">»</label><span>${total}</span>`;
        } else {
            dom += `<span>1</span>`;
            dom += `<label title="向前5页">«</label>`;
            i = total - 4;
            while (i <= total) {
                let active = pageNow === i ? 'active' : ''; dom += `<span class="${active}">
                    ${i}</span>`;
                i++;
            }
        }
    }
    dom += `<span class="${endDisabled} text">下一页</span><span class="${endDisabled} text">末页</span>`;
    $page.html(dom);
}

<div class="page" id="page">
</div>

.page {
  display: inline-block;
  width: 660px
}

.page .disabled {
  color: #999;
  cursor: not-allowed
}

.page .active {
  background-color: #489AF6;
  color: #fff;
  border-color: #489AF6
}

.page label,
.page span {
  display: inline-block;
  cursor: pointer;
  color: #489AF6
}

.page span {
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  box-sizing: border-box
}

.page span:nth-child(n+2) {
  margin-left: 10px
}

.page .text {
  width: auto;
  padding: 0 10px
}

.page label {
  padding-left: 10px
}