前端 JS 分頁功能的實現

page.js文件內容

function buildPagination(pageNo, pageSize, total){
    if(total <= 0){
        return;
    }
    var maxPage = parseInt(total / pageSize);
    if((total % pageSize) > 0){
        maxPage ++;
    }
    var firstHtml = "<li><a href='javascript:void(0);' onclick='setPageNo(1);' aria-label='First'><span aria-hidden='true'>&laquo;</span></a></li>";
    var lastHtml = "<li><a href='javascript:void(0);' onclick='setPageNo("+maxPage+");' aria-label='Last'><span aria-hidden='true'>&raquo;</span></a></li>";
    $(".pagination").append(firstHtml);

    var start = (pageNo - 2) > 0 ? (pageNo - 2) : 1;
    var end = (maxPage - pageNo) > 2 ? (pageNo + 2) : maxPage;

    for(var i = start; i <= end; i ++){
        if(i == pageNo ){
            $(".pagination").append("<li class='active' ><a href='javascript:void(0);' onclick='setPageNo("+i+");' >"+i+"</a></li>");
        }else{

            $(".pagination").append("<li><a href='javascript:void(0);' onclick='setPageNo("+i+");' >"+i+"</a></li>");
        }
    }
    $(".pagination").append(lastHtml);
}

html頁面內容

<link rel="stylesheet" href="./assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">

<div class="col-md-12 col-lg-12">
    <nav aria-label="Page navigation" class="pull-right">
        <ul class="pagination">
        </ul>
    </nav>
</div>

<script src="./assets/js/jQuery.js"></script>
<script src="./assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="./assets/js/page.js"></script>
<script>
    var pageNum = 1;
    // 分頁
    function setPageNo(pageNo) {
        pageNum = pageNo;
        pageSearch();
    }
</script>

頁面效果以下