ejs模板中定义页码组件

使用了jquery,页码不超过10的时候全部显示，超过了10则显示部分页码，相关可以看下图

页码demo地址
页码总数是12，当前页码是7，其中的箭头向前/往后跳转5页

1. 新建page.ejs文件
2. 在需要页码的地方引入<%- include('includes/page.ejs',{total:12,pageNow:2})%>total是总页码数，pageNow是当前页码
3. 在page.ejs编写页码代码

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

</div>
<script type="text/javascript">
    let page = ('#page');
    let pageNow = parseInt('<%= pageNow%>')
    let total = parseInt('<%= total%>')
    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;
        console.log(e, sign, sign === '»');
        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);
        // pageChange(e.target.innerText) // 调用页面的都要
    })
    function pageSet(total, pageNow) {
        let i = 1, dom = '';
        let firstDisabled = pageNow === 1 ? 'disabled' : '';
        let endDisabled = pageNow === total ? 'disabled' : '';
        dom = `<span class="{firstDisabled} text">首页{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}`;             } else if (pageNow > 3 && pageNow < total - 3) {                 dom += `1`;                 dom += `«`;                 dom += `{pageNow - 2}</span>`;
                dom += `<span>{pageNow - 1}`;                 dom += `{pageNow}</span>`;
                dom += `<span>{pageNow + 1}`;                 dom += `{pageNow + 2}</span>`;
                dom += `<label title="向后5页">»</label><span>{total}`;             } else {                 dom += `1`;                 dom += `«`;                 i = total - 4;                 while (i <= total) {                     let active = pageNow === i ? 'active' : ''; dom += `{i}`;                     i++;                 }             }         }         dom += `{endDisabled} text">末页`;         page.html(dom);
    }
</script>

页码的样式

.page {
    display: inline-block;
    width: 660px;
    .disabled {
        color: #999999;
        cursor: not-allowed;
    }
    .active {
        background-color: #489AF6;
        color: #fff;
        border-color: #489AF6;
    }
    span {
        display: inline-block;
        height: 32px;
        width: 32px;
        line-height: 32px;
        text-align: center;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        color: #489AF6;
        cursor: pointer;
    }
    span:nth-child(n+2) {
        margin-left: 10px;
    }
    .text {
        width: auto;
        padding: 0 10px;
    }
    label {
        display: inline-block;
        cursor: pointer;
        padding-left: 10px;
        color: #489AF6;
    }
}