表格分页组件

//日历
/**
 * [creatPage description]
 * @param  {[type]}   dateWrap  [包裹控件元素id]
 * @param  {[type]}   total     [表格数据总条数]
 * @param  {[type]}   pageCount [每页条数]
 * @param  {Function} callback  [回调函数]
 * @return {[type]}             [description]
 */
function creatPage(dateWrap, total, pageCount, callback) {
    var yearFlag = 0;
    var pageNum = total%pageCount == 0 ? total / pageCount : Math.floor(total / pageCount) + 1;
    $("#" + dateWrap).html(`<div class="workrisk-bottom-page" style="height: 5%;width: 100%;display: block;">
        <div style="float: left">共
            <span id="workRiskData-totalcount" class="workRiskData-totalcount">${total}</span>
            条记录 每页显示: 
            <div  class="workrisk-table-pagesize pagesize-select showList-25">25</div>
        </div>
        <div style="float: right">
            <div class="workrisk-table-nextpage prev-page">上一页</div>
            <span class="now-page">1</span>/<span class="total-page">${pageNum}</span>
            <div class="workrisk-table-nextpage next-page">下一页</div>
            <input id="now-pageNo" value="1" class="workrisk-table-inputpage">
            <div class="workrisk-table-nextpage workrisk-page-go">GO</div>
        </div>
    </div>`);

    //$("#" + dateWrap + " .workRiskData-totalcount").text(total);
    //$("#" + dateWrap + " .total-page").text(pageNum);
    //$("#" + dateWrap + " .showList-" + pageCount).addClass('pagesize-select');
    //上一页
    $(".prev-page").off('click').on('click',function(){
        let nowPageValue = +$(this).next().text();
        
        if(nowPageValue > 1) {
            $(this).next().text(nowPageValue - 1);
            $(this).nextAll().eq(3).val(nowPageValue - 1);
            callback(nowPageValue - 1);
        }
    });

    //下一页
    $(".next-page").off('click').on('click',function(){
        let nowPageValue = +$(this).prevAll().eq(1).text();
        if(nowPageValue < pageNum) {
            $(this).prevAll().eq(1).text(nowPageValue + 1);
            $(this).next().val(nowPageValue + 1);
            callback(nowPageValue + 1);
        }
    });
    
    //go 跳转页面
    $(".workrisk-page-go").off('click').on('click',function(){
        let pageValue = +$(this).prev().val();  //input输入框的数字
        let reg = new RegExp('^[0-9]*$');

        if(reg.test(pageValue)) {
            if (0 < pageValue && pageValue<=pageNum){
                $(this).prevAll().eq(3).text(pageValue);
                callback(+pageValue);
            } else if(pageValue <= 0) {
                $(this).prevAll().eq(3).text(1);
                $(this).prev().val(1);
                callback(1);
            } else {
                $(this).prevAll().eq(3).text(pageNum);
                $(this).prev().val(pageNum);
                callback(pageNum);
            }
        } else {
            $(this).prev().val($(this).prevAll().eq(3).text());
        }
    })
}
/*//获取分页事件后的值
function getPageValue(pageNowNum) {
    return pageNowNum;
}*/

/**  分页样式 **/
.workrisk-bottom-page{
    height: 5%;
    width: 100%;
    display: block;
    cursor: context-menu;
    /*margin-top: 0.4rem;*/
}
.workrisk-bottom-page > div >div{
    display: inline-block;
}
.workrisk-table-pagesize{
    border: 1px #45597C solid;
    width: 2.5rem;
    height: 1.8rem;
    text-align: center;
    margin: 0 0.3rem 0 0.3rem;
}
.workrisk-table-nextpage{
    border: 1px #45597C solid;
    width: 5rem;
    height: 1.8rem;
    text-align: center;
    margin: 0 0.5rem 0 0.5rem;
    box-shadow: 0 0 1rem rgba(102,204,255,.35) inset;
    cursor: pointer;
    /* border-radius: 1rem; */
}
.workrisk-table-inputpage{
    padding: 0.138889rem;
    width: 2rem;
    height: 1.8rem;
    margin: 0 0.5rem 0 0.2rem;
    background-color: rgb(13,28,61);
    border: 1px #45597C solid;
}
.pagesize-select{
    box-shadow: 0 0 1rem rgba(102,204,255,.35) inset;
}
.powerrisk-table-riskcontent{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: inherit;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    cursor: context-menu;
}
.workRiskData-totalcount {
    margin: 0 0.5rem 0 0.5rem;
    font-weight: bold;
}
/**  分页样式 **/