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

<!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的简单分页插件
URL地址：https://www.cdcxhl.com/article14/jocode.html

成都网站建设公司_创新互联，为您提供定制开发、响应式网站、面包屑导航、品牌网站制作、自适应网站、网站排名

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容