原生js简单分页

样式丑了点，还有bug和优化的地方，不过大致上就是这样，提供思路，仅供参考。
html

<div class="pagination">
        <span>每页显示</span>
        <input id="perPage" type="text" onchange="perPageChange()">
        <span>条/共</span>
        <span id="total"></span>
        <span>条记录，共</span>
        <span id="pages"></span>
        <span>页</span>
        <button class="actionBtn actionBtnHover" onclick="firstpage()">首页</button>
        <button class="actionBtn actionBtnHover" onclick="prevpage()">上一页</button>
        <span>第</span>
        <input id="numPages" type="text" onchange="numPagesChange()">
        <span>页</span>
        <button class="actionBtn actionBtnHover" onclick="nextpage()">下一页</button>
        <button class="actionBtn actionBtnHover" onclick="endpage()">尾页</button>
        <button class="actionBtn" onclick="gopage()">跳转</button>
    </div>

css

.pagination{
    height: 50px;
    border: 1px solid #ccc;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
    padding-right: 10px;
}
#perPage,#numPages{
    width: 30px;
    outline: none;
    border:1px solid #ccc;
    text-align: center;
}
.actionBtn{
    margin: 0 1px;
    outline: none;
    background-color: #fff;
    border:1px solid #ccc;
    cursor: pointer;
}
.actionBtnHover:hover{
    color: #fff;
    background-color: #1F85EC;
}

js

var pagination = {
    page:1,
    size:10,
    total:100,
    pages:10,
};
function pagingInit(){
    document.getElementById('numPages').value = pagination.page;/* 第几页 */
    document.getElementById('total').innerText = pagination.total;/* 总条数 */
    document.getElementById('pages').innerText = pagination.pages;/* 总页数 */
    document.getElementById('perPage').value = pagination.size;/* 每页显示的条数 */
    if(pagination.page ==1){
        for(var i=0;i<document.getElementsByClassName('actionBtn').length;i++){
            if(pagination.page == pagination.pages){
                document.getElementsByClassName('actionBtn')[i].classList.remove('actionBtnHover');
                document.getElementsByClassName('actionBtn')[i].setAttribute("disabled", "disabled");
            }else{
                if(i>=2){
                    document.getElementsByClassName('actionBtn')[i].classList.add('actionBtnHover');
                    document.getElementsByClassName('actionBtn')[i].removeAttribute("disabled");
                }else{
                    document.getElementsByClassName('actionBtn')[i].classList.remove('actionBtnHover');
                    document.getElementsByClassName('actionBtn')[i].setAttribute("disabled", "disabled");
                }
            }
        }
    }else{
        for(var i=0;i<document.getElementsByClassName('actionBtn').length;i++){
                document.getElementsByClassName('actionBtn')[i].classList.add('actionBtnHover');
                document.getElementsByClassName('actionBtn')[i].removeAttribute("disabled");
        }
    };
    if(pagination.page == pagination.pages){
        for(var i=0;i<document.getElementsByClassName('actionBtn').length;i++){
            if(i==2||i==3){
                document.getElementsByClassName('actionBtn')[i].classList.remove('actionBtnHover');
                document.getElementsByClassName('actionBtn')[i].setAttribute("disabled", "disabled");
            }else{
                document.getElementsByClassName('actionBtn')[i].classList.add('actionBtnHover');
                document.getElementsByClassName('actionBtn')[i].removeAttribute("disabled");
            }
        }
    }
};
window.onload = function () {
    pagingInit();
};
function perPageChange(){/* 每页显示的条数 */
    pagination.size = Number(document.getElementById('perPage').value);
};
function firstpage(){/* 首页 */
    pagination.page = 1;
    pagingInit();
};
function prevpage(){/* 上一页 */
    if(pagination.page>1){
        pagination.page--;
    }
    pagingInit();
};
function numPagesChange(){/* 第几页 */
    pagination.page = Number(document.getElementById('numPages').value);
};
function nextpage(){/* 下一页 */
    if(pagination.page<pagination.pages){/* 在总页数之内 */
        pagination.page++;
    }
    pagingInit();
};
function endpage(){/* 尾页 */
    pagination.page = pagination.pages;
    pagingInit();
};
function gopage(){/* 跳转 */
    pagingInit();
};