html 分頁

 

/*列表分頁底部按鈕*/
div.tablefooter{
    color: #4f6d95;
}
select.pageLength{
    border: 1px solid #d0daea;
    border-radius: 2px;
    height: 24px;
    color: #4f6d95;
    padding-left:3px ;
}
select.pageLength:focus{
    border: 1px solid #81c7f7;
    outline: none;
}
.pageBtn{
    height: 24px;
    width: 24px;
    background-color: #FFFFFF;
    border: 1px solid #d0daea;
    border-radius: 2px;
    color: #bac3d1;
    text-align: center;
    /*padding: 1px;*/
    font-size: 14px;
    cursor:pointer;
    display:inline-block;
    outline:0;
}
.pageBtn:hover{
    background-color: #26a2f7;
    border: 1px solid #26a2f7;
    color: #FFFFFF;
}

.firstOrLast{
    width: 40px;
}

input.pageNo{
    width: 30px;
    text-align: center;
    border-radius: 2px;
    padding-left: 0px;
    border: 1px solid #d0daea;
    height: 22px;
    color: #4f6d95;
}

 

    <div class="tablefooter">
        <div class="float-left">
            <span >
                <select class="select pageLength" name="pageSize" id="pageSize">
                    <option value="5" selected="selected">5</option>
                    <option value="10">10</option>
                    <option value="15">15</option>
                    <option value="20">20</option>
                    <option value="25">25</option>
                </select>
                                   條/頁
            </span>
        </div>

        <div class="float-right">
            <span>共100條記錄/10頁</span>
            <button class='pageBtn firstOrLast' id='firstPage'>首頁</button>
            <button class='pageBtn preOrNextPage' id='prePage'><i class="Hui-iconfont Hui-iconfont-arrow2-left"></i></button>
            <button class='pageBtn pageNumBtn'>1</button>
            <button class='pageBtn pageNumBtn'>2</button>
            <button class='pageBtn pageNumBtn activeBtn'>3</button>
            <button class='pageBtn pageNumBtn'>4</button>
            <button class='pageBtn pageNumBtn'>5</button>
            <button class='pageBtn preOrNextPage'  id='nextPage'><i class="Hui-iconfont Hui-iconfont-arrow2-right"></i></button>
            <button class='pageBtn firstOrLast' id='lastPage'>末頁</button>
            <span>跳至<input type='text' class='pageNo'>頁</span>
            

        </div>
        <div class="blank"></div>
    </div>

/*
 表格分頁
 * */
// 總頁數，每頁條數，當前頁,總記錄數
function setTablePage(totalPage,pageSize,currentPage,totalCount){
    
    var html ="";
  //  var totalPage = Math.ceil(totalCount / pageSize);
    
    html  = "<span>共"+totalCount+"條\/"+totalPage+"頁</span>\n";
    if(currentPage !== 1){
        html = html +"<button class='pageBtn firstOrLast' id='firstPage'>首頁</button>\n"
            +"<button class='pageBtn preOrNextPage' id='prePage'><i class='Hui-iconfont Hui-iconfont-arrow2-left'></i></button>\n";
    }
    var numBtnCount = 5; //顯示頁碼個數
    var startPage,endPage;
    if (totalPage <= numBtnCount ) {  //頁數少於可顯示個數

        startPage = 1;
        endPage = totalPage;

    } else { // 頁數大於可顯示個數

        if(currentPage <= ((numBtnCount+1)/2)){
            startPage = 1;
            endPage = numBtnCount;

        } else if( currentPage < (totalPage-(numBtnCount/2)) ){
            startPage = currentPage - parseInt(numBtnCount/2);
            endPage = startPage + numBtnCount -1;
        } else {
            startPage = totalPage - numBtnCount +1;
            endPage = totalPage;
        }
    }
    for(var i=startPage;i<= endPage;i++){
        if(i === currentPage){
            html = html + "<button class='pageBtn pageNumBtn activeBtn'>"+i+"</button>\n";
        }else{
            html = html + "<button class='pageBtn pageNumBtn'>"+i+"</button>\n";
        }
    }

    if(currentPage !== totalPage && totalPage !== 0){
        html = html  + " <button class='pageBtn preOrNextPage' id='nextPage'><i class='Hui-iconfont Hui-iconfont-arrow2-right'></i></button>\n"
                    + "<button class='pageBtn firstOrLast' id='lastPage'>末頁</button>\n";
    }
    if(totalPage > 1 ){

        html = html + "<span>跳至<input type='text' class='pageNo' name='pageNo'>頁</span>\n" /*+ "<button class='pageBtn' id='pageOkBtn'>確定</button>"*/;
    }
    $(".tablefooter .float-right").html(html);
    $("#pageSize option[value='"+pageSize+"']").prop("selected",true);
}

var data = {pageSize:parseInt($("#pageSize").val()),pageNo:1};
//更換列表長度
$("#pageSize").on("change",function () {
    data.pageNo = 1;
    if(data.totalPage==0){
        return;
    }
    data.pageSize = parseInt( $("#pageSize").val() );
    ajaxReq(data);
});

$(".tablefooter").on("click","#firstPage",function () {
    data.pageNo = 1;
    ajaxReq(data);
});

$(".tablefooter").on("click","#lastPage",function () {
    data.pageNo = data.totalPage;
    ajaxReq(data);
});
$(".tablefooter").on("click","#prePage",function () {
    data.pageNo = data.pageNo-1;
    ajaxReq(data);
});
$(".tablefooter").on("click","#nextPage",function () {
    data.pageNo = data.pageNo+1;
    ajaxReq(data);
});

$(".tablefooter").on("click",".pageNumBtn",function () {

    var val = $(this).html();
    if(""==val || val == data.pageNo){
        return;
    }
    data.pageNo=parseInt(val);
    ajaxReq(data);
});


$(".tablefooter").on("change",".pageNo",function () {
    var pageNo = $(".pageNo").val();

    if(!pageNo){
        return;
    }
    if(data.totalPage == null || data.totalPage <=0  ){
        return;
    }
    if(pageNo == data.pageNo){
        return;
    }

    if(!/^[1-9]\d*$/.test(pageNo)) {//對當前頁碼進行整數校驗
        alertToFocus("請輸入整數",$(this));
        return;
    }
    if(pageNo > data.totalPage) {//判斷當前頁碼是否大於最大頁
        alertToFocus("輸入頁碼過大",$(this));
        return;
    }
    data.pageNo = parseInt(pageNo);
    ajaxReq(data);
});