The realization of front-end JS paging function

Contents of the page.js file

function buildPagination(pageNo, pageSize, total){
    if(total <= 0) {return;
    }
    var maxPage = parseInt(total / pageSize);
    if((total % pageSize) > 0){
        maxPage ++;
    }
    var firstHtml = "
« 
";
    var lastHtml = "
+maxPage+"); ' aria-label='Last'>» ";
    $(".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("
+i+");' >"+i+"</a></li>");
        }else{$(".pagination").append("
+i+");' >"+i+"</a></li>"); }} $(".pagination").append(lastHtml);
}
Copy the code

HTML page content

< link rel = "stylesheet" href = ".. / assets/the 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/the 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>Copy the code

The page looks like this