美文网首页
Bootstrap仿百度分页

Bootstrap仿百度分页

作者: 我叫397 | 来源:发表于2020-06-08 15:27 被阅读0次

    划水摸鱼的时候研究了下百度分页,在此分享一下!

    效果图:

    效果图.png

    引用文件:

    <link rel="stylesheet" href="./bootstrap.min.css"/> <!-- bootstrap-3.3.7 -->
    <script src="./jquery.min.js" type="text/javascript"></script> <!-- jquery-1.12.1 -->
    <script src="./bootstrap.min.js" type="text/javascript"></script> <!-- bootstrap-3.3.7 -->
    

    CSS:

    .noPadding{
        padding: 0;
    }
    

    HTML:

    <div class="container-fluid noPadding">
        <!-- 分页 -->
        <div class="row" id="paging">
            <div class="col-md-12 text-left navigation-area">
                <nav aria-label="page navigation">
                    <ul class="pagination"><li id="first-page"><a href="javascript:;">首页</a></li></ul>
                    <ul class="pagination"><li id="pre-page"><a href="javascript:;">上一页</a></li></ul>
                    <ul class="pagination" id="numList"></ul>
                    <ul class="pagination"><li id="next-page"><a href="javascript:;">下一页</a></li></ul>
                    <ul class="pagination"><li id="last-page"><a href="javascript:;">尾页</a></li></ul>
                </nav>
            </div>
        </div>
    </div>
    

    JS:

    var currentPage,totalPage; //当前页数,总页数
    
    $(document).ready(function () {
        //初始加载赋值当前页和总页数
        currentPage = 20;
        totalPage = 100;
        pagingFunc(currentPage, totalPage);
    });
    
    //分页函数
    function pagingFunc(currentPage, totalPage) {
        var pNs = "";
        //显示当前所有页码的数组
        var pageArray = [];
        //总页数小于11页的情况
        if (totalPage < 11) {
            for(var i = 0;i < totalPage; i++){
                pageArray.push(i + 1);
            }
        }else if (currentPage > 5 && (totalPage - currentPage) > 3) { //当前页大于5且总页数减当前页大于3
            pageArray = [currentPage-5, currentPage-4, currentPage-3, currentPage-2, currentPage-1, currentPage, currentPage+1, currentPage+2, currentPage+3, currentPage+4]
        }else if (currentPage > 5 && (totalPage - currentPage) < 4) { //当前页大于5且总页数减当前页小于4
            pageArray = [totalPage-9, totalPage-8, totalPage-7, totalPage-6, totalPage-5, totalPage-4, totalPage-3, totalPage-2, totalPage-1, totalPage]
        }else if (currentPage < 6 && totalPage > 9) { //当前页小于6且总页数大于9
            for(var i = 0;i < 10; i++){
                pageArray.push(i + 1);
            }
        }
        //当前页对应的页码加高亮
        for(var h = 0;h < pageArray.length; h++){
            if(pageArray[h] == currentPage){
                pNs += '<li class="active"><a href="javascript:;">'+ pageArray[h] +'</a></li>';
            }else{
                pNs += '<li><a href="javascript:;">'+ pageArray[h] +'</a></li>';
            }
        }
        $("#paging #numList").html(pNs);
        if (currentPage == 1 && totalPage != 1) { //如果当前页等于1且总页数不等于1,则首页和上一页按钮隐藏
            $('#first-page').css('display', 'none');
            $('#pre-page').css('display', 'none');
            $('#last-page').css('display', 'block');
            $('#next-page').css('display', 'block');
        } else if (currentPage == 1 && totalPage == 1){ //如果当前页等于1且总页数等于1,则首页、上一页、尾页、下一页按钮隐藏
            $('#last-page').css('display', 'none');
            $('#next-page').css('display', 'none');
            $('#first-page').css('display', 'none');
            $('#pre-page').css('display', 'none');
        } else if (currentPage == totalPage && totalPage != 1) { //如果当前页等于总页数且总页数不等于1,则尾页和下一页按钮隐藏
            $('#last-page').css('display', 'none');
            $('#next-page').css('display', 'none');
            $('#first-page').css('display', 'block');
            $('#pre-page').css('display', 'block');
        } else { //以上条件都不满足则所有按钮均可用
            $('#first-page').css('display', 'block');
            $('#pre-page').css('display', 'block');
            $('#last-page').css('display', 'block');
            $('#next-page').css('display', 'block');
        }
    }
    
    //点击页码
    $("ul#numList").on("click","li",function(){
        currentPage = parseInt($(this).text());
        pagingFunc(currentPage, totalPage);
    });
    //点击上一页按钮
    $('#pre-page').click(function(){
        currentPage--;
        pagingFunc(currentPage, totalPage);
    });
    //点击下一页按钮
    $('#next-page').click(function(){
        currentPage++;
        pagingFunc(currentPage, totalPage);
    });
    //点击首页按钮
    $('#first-page').click(function () {
        currentPage = 1;
        pagingFunc(currentPage, totalPage);
    });
    //点击尾页按钮
    $('#last-page').click(function () {
        currentPage = totalPage;
        pagingFunc(currentPage, totalPage);
    });
    

    参考链接:点击前往

    相关文章

      网友评论

          本文标题:Bootstrap仿百度分页

          本文链接:https://www.haomeiwen.com/subject/urrrtktx.html