美文网首页
前端实现分页

前端实现分页

作者: 阿怪_9653 | 来源:发表于2019-10-10 16:53 被阅读0次

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <link href="yemiannew.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
    <div id="content"></div>
    <div class="big_div">
    <div class="center_div" id="shouye" onclick="count('thefirstpage')">首页</div>
    <div class="center_div" id="pre" onclick="pre(1)">上一页</div>
    <div class="little_div" id="mid"></div>
    <div class="center_div" id="next" onclick="next(1)">下一页</div>
    <div class="center_div" id="moye" onclick="count('thelastpage')">末页</div>
    <div class="center_div" id="tiaozhuan" onclick="count('turn')">跳转</div>
    <input type="text" id="tiaozhuan_number"/>
    </div>
    </body>

    <script type="text/javascript">
        var currpage;
        currpage=1;
    var data="[1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100]";
    

    data = data.substring(1,data.length-1);
    var pageData = data.split(" ");
    var nood_pre = "<div class='db-sig-detail flex'>"+
    "<div class='l'>"+
    "<p>美名评分</p>"+
    "<strong>99</strong>分"+
    "</div>"+
    "<div class='m flex_div'>";
    var nood_pro = "</div>"+
    "<div class='r'>"+
    " <span class='clickpop'>立即查看分析</span>"+
    "</div>"+
    "</div>";
    var nood_list;
    var nood="";
    // for (var i = 0; i <(pageData.length-1)/4; i++) {
    // nood="";
    // for (var j = 0; j < 4; j++) {
    // nood += nood_pre+pageData[i*4+j]+nood_pro;
    // }
    // $("#content").append(nood);
    // }

        for (var j = 0; j < 4; j++) {
                nood  +=  nood_pre+pageData[(currpage-1)*4+j]+nood_pro;
            }
            var $content = $("#content");
            var $mid = $("#mid");
            var $pre = $("#pre");
            var $next = $("#next");
            $content.append(nood);
            $mid.append(midNood(1))
    
        function midNood(currpage){
            if (currpage < 3) {
                currpage = 3;
            }
            if (currpage >= Math.ceil(pageData.length/4)) {
                currpage = Math.ceil(pageData.length/4)-2;
            }
            var midnood=""
            for (var i = 0; i <5; i++) {
                midnood += "<div class='center_div' onclick='mid("+(currpage-2+i)+")'>"+(currpage-2+i)+"</div>";
            }
            return midnood;
        }
    
        function mid(currpage){
            var nood="";
            for (var j = 0; j < 4; j++) {
                nood  +=  nood_pre+pageData[(currpage-1)*4+j]+nood_pro;
            }
            $content.html(nood);
            $mid.html(midNood(currpage))
            $next.attr('onclick',"next("+ currpage +")");
            $pre .attr('onclick',"pre("+ currpage +")");
            }
        function pre(currpage){
            if(currpage < 1){
                return;
            }
            var nood="";
            for (var j = 0; j < 4; j++) {
                nood  +=  nood_pre+pageData[(currpage-2)*4+j]+nood_pro;
            }
    
            $content.html(nood);
            $mid.html(midNood(currpage))
            $next.attr('onclick',"next("+(currpage-1)+")");
            $pre .attr('onclick',"pre("+(currpage-1)+")");
        }
        function next(currpage){
            if(currpage >= Math.ceil(pageData.length/4)){
                return;
            }
            var nood="";
            for (var j = 0; j < 4; j++) {
                nood  +=  nood_pre+pageData[(currpage)*4+j]+nood_pro;
            }
            $content.html(nood);
            $mid.html(midNood(currpage))
            $next.attr('onclick',"next("+(currpage+1)+")")  ;
            $pre .attr('onclick',"pre("+(currpage+1)+")")  ;
        }
    </script>   
    

    </html>

    相关文章

      网友评论

          本文标题:前端实现分页

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