溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

自己寫的基于bootstrap的簡單分頁插件

發(fā)布時間：2020-08-06 13:01:01 來源：網(wǎng)絡 閱讀：803 作者：Lee_吉 欄目：web開發(fā) 
<!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>
向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手