Jq 页面分页

た入场券 2023-01-22 15:47 34阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
     
    
    .rb_bottom,.rb_bottom .fy_y,.rb_bottom .pnbtn,.rb_bottom .previous,.rb_bottom .next { 
    	display:flex;
    	justify-content:center;
    	align-items:center;
    }
    .fy_y { 
    	width:24px;
    	height:24px;
    	box-sizing:border-box;
    	background:#fff;
    	border:1px solid #7baaa0;
    	border-radius:50%;
    	color:#4f4f4f;
    	font-size:14px;
    	font-weight:500;
    	margin-right:12px;
    	cursor:pointer;
    }
    .fy_d { 
    	width:8px;
    	height:8px;
    	border-radius:50%;
    	background:#fff;
    	margin-right:12px;
    }
    .selected { 
    	background:#164c86;
    	color:#fff;
    	border:0;
    }
    .pnbtn,.previous,.next { 
    	width:62px;
    	height:31px;
    	box-sizing:border-box;
    	border:3px solid #fff;
    	border-radius:10px;
    	font-weight:500;
    	font-size:14px;
    	cursor:pointer;
    	color:#fff;
    }
    .previous { 
    	margin:0 2px;
    }
    </style>    
    <body>
        <div class="rb_bottom">
            <div class="fy_y selected">1</div>
            <div class="fy_y">2</div>
            <div class="fy_y">3</div>
            <div class="fy_y">4</div>
            <div class="fy_y">5</div>
            <div class="fy_d"></div><div class="fy_d"></div><div class="fy_d"></div>
            <div class="fy_y">10</div>
            <div class="previous">上一页</div>
            <div class="next">下一页</div>
        </div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        //总页数
         var total=62;
        $(function () { 
           
            makePage(total,1);
        });
        function makePage(total, page) { 
            var pageHtml = '';
            var ddd='<div class="fy_d"></div><div class="fy_d"></div><div class="fy_d"></div>';
            function createPage(index) {  //单页码生成
                if (page == index) { 
                    pageHtml+= '<div class="fy_y selected" >'+page+'</div>';
                } else { 
                    pageHtml+= '<div class="fy_y" οnclick="pageClick(this)">'+index+'</div>';
                }
            }
     
            if (total <= 10) { 
                for (var i = 1; i <= total; i++) { 
                    createPage(i);
                }
            } else { 
                if (page <= 4) {  //总页数大于10且当前页远离总页数(小于4)
                    for (var i = 1; i <= 4+1; i++) { //显示1-5
                        createPage(i);
                    }
                    pageHtml+= ddd;
                    createPage(total);
     
                } else if (page > total - 4) {  //总页数大于10且当前页接近总页数(大于总页数-4)
                    createPage(1);
                    pageHtml+= ddd;
                    for (var i = total-4; i <= total; i++) { 
                        createPage(i);
                    }
                } else {   //除开上面两个情况 当前页在中间
                    createPage(1);
                    pageHtml+= ddd;
                    for (var i = page-1; i <= page+1; i++) { 
                        createPage(i);
                    }
                    pageHtml+= ddd;
                    createPage(total);
                }
            }
     
            if (page > 1 && total > 1) {  // 上一页
                pageHtml+='<div class="previous" οnclick="previous()">上一页</div>';
            } else { 
                pageHtml+='<div class="previous">上一页</div>';
            }
            if (page < total && total > 1) {  // 下一页
                pageHtml+= '<div class="next" οnclick="next()">下一页</div>';
            } else { 
                pageHtml+= '<div class="next">下一页</div>';
            }
            $('.rb_bottom').html(pageHtml);
        }
        //上一页点击事件
        function previous() { 
            //获取当前页
            var page=$('.rb_bottom>.selected').text(); 
              alert(page - 1 )
            makePage(total,page-1);
        }
        //下一页点击事件
        function next() { 
            //获取当前页
            var page=$('.rb_bottom>.selected').text();  
            var pagex = ++page 
            console.log(pagex)
    
            makePage(total,page*1+1);
        }
        function pageClick(that) { 
            var page=$(that).html();
            makePage(total,page*1);
        }
    </script>
    
    </html>