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编写页码代码

页码的样式

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