自己写的基于bootstrap的简单分页插件

发布时间：2020-08-06 13:01:01 作者：Lee_吉
来源：网络阅读：800
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav aria-label="Page navigation">
  <ul class="pagination">

  </ul>
</nav>
</body>
<script>
var obj = {
        page: 2,
        pagesize: 10,
        itemcount: 55,
        pagecount: 6
    }
function loadPage(obj){
    var page = obj.page
    var pagesize = obj.pagesize
    var pagecount = obj.pagecount
    var str = "<li> <a href='#' aria-label='Previous'> <span aria-hidden='true'>&laquo;</span> </a> </li>"
    if(pagecount<=5){        
        for(var i=1;i<=pagecount;i++){
            if(i == page){
                str += "<li class='active'><a href='#'>"+i+"</a></li>"
            }else{
                str += "<li><a href='#'>"+i+"</a></li>"
            }
        }
    }else{
        if(page<=2){
            for(var i=1;i<=2;i++){
                if(i == page){
                    str += "<li class='active'><a href='#'>"+i+"</a></li>"
                }else{
                    str += "<li><a href='#'>"+i+"</a></li>"
                }
            }
            str += "<li><a href='#'>...</a></li>"
            str += "<li><a href='#'>"+(pagecount-1)+"</a></li>"
            str += "<li><a href='#'>"+pagecount+"</a></li>"
        }else if(page>2 && page<pagecount-1){
            str += "<li><a href='#'>1</a></li>"
            str += "<li><a href='#'>2</a></li>"
            str += "<li><a href='#'>...</a></li>"
            str += "<li class='active'><a href='#'>"+page+"</a></li>"
            str += "<li><a href='#'>...</a></li>"
            str += "<li><a href='#'>"+(pagecount-1)+"</a></li>"
            str += "<li><a href='#'>"+(pagecount)+"</a></li>"
        }else{
            str += "<li><a href='#'>1</a></li>"
            str += "<li><a href='#'>2</a></li>"
            str += "<li><a href='#'>...</a></li>"
            for(var i=pagecount-1;i<=pagecount;i++){
                if(i == page){
                    str += "<li class='active'><a href='#'>"+i+"</a></li>"
                }else{
                    str += "<li><a href='#'>"+i+"</a></li>"
                }
            }
        }
    }
    str += "<li> <a href='#' aria-label='Next'> <span aria-hidden='true'>&raquo;</span> </a> </li>"
    $('.pagination').html(str)
}
loadPage(obj)
</script>
</html>
自己写的基于bootstrap的简单分页插件

相关阅读
