Jq 页面分页

最新推荐文章于 2022-07-27 22:02:45 发布
外下羊.
最新推荐文章于 2022-07-27 22:02:45 发布
阅读量164
点赞数
分类专栏： Js
本文链接：https://blog.csdn.net/Rick_and_mode/article/details/117080840
版权
Js 专栏收录该内容
11 篇文章 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>