利用ajax做一个分页效果

最新推荐文章于 2022-03-28 22:41:57 发布

原创最新推荐文章于 2022-03-28 22:41:57 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

ajax 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了一种使用CSS进行布局的方法，通过设置特定样式实现动态页面效果。具体包括使用浮动元素、相对定位和绝对定位来创建响应式布局，同时利用JavaScript动态加载数据并更新页面内容，展示了如何结合HTML、CSS和JavaScript实现商品信息展示和分页功能。

效果图
在这里插入图片描述

//css
 body{
        margin: 0;
    }
    .wrap{
        width: 830px;
        height: 250px;
        border: 1px solid black;
        margin: 0 auto;
        position: relative;
    }
    ul{
        padding: 0;
        margin: 0;
        list-style:none;
    }
    .lists li{
        width: 200px;
        height: 200px;
        background-color:pink;
        float: left;
        margin-right: 10px;
        font-size:16px;
    }
    .lists li:nth-child(4){
        margin-right:0;
    }
    .pages{
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .pages li{
        width:40px;
        height:40px;
        background-color: burlywood;
        border-radius: 50%;
        margin-right: 15px;
        float: left;
        font-size: 15px;
        line-height: 35px;
        text-align: center;
        cursor: pointer;
    }
    .pages li.active{
        background-color: blueviolet;
        color: brown;
    }
    </style>

//html
 <div class="wrap">
        <ul class="lists">
        </ul>
        <ul class="pages">
        </ul>
 </div>

//JS
<script src="jquery.min.js"></script>
    <script>
    //获取数据
    $.ajax("apple.txt",{
        "dataType":"json", //返回的数据为json格式
    }).done(function(data){ ////获取的数据存在data里
	       //解析数据
	        var num = 4;
	        var iPage = Math.ceil(data.length/num);
	        //创建按钮
	        for(var i=0;i<iPage;i++){
	            $("<li>").html("第"+(i+1)+"页").on("click",function(){
	                $(this).addClass("active").siblings().removeClass("active");
	                whichApple($(this).index());
	            }).appendTo($(".pages")).addClass(i==0 ? "active" : "");
	        }
	        whichApple(0);
	        function whichApple(n){ //n=0 ->0,1,2,3
	            $(".lists").html("");
	            for(var i=n*4;i<(n+1)*4&&i<data.length;i++){
	                var oP1 = $("<p>").html("商品编号").append($("<span>").html(data[i].id));
	                var oP2 = $("<p>").html("商品名称").append($("<span>").html(data[i].name));
	                var oP3 = $("<p>").html("商品价格").append($("<span>").html(data[i].price));
	                $("<li>").append(oP1).append(oP2).append(oP3).appendTo($(".lists"))
	            }
	        }
	    })
	    </script>

注意事项：代码要在服务器中加载哦