分页器的实现——动态获取服务器的数据

最新推荐文章于 2024-05-03 15:43:47 发布

把队友挂树上

最新推荐文章于 2024-05-03 15:43:47 发布

阅读量307

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_61703542/article/details/124898617

版权

思路：

1、分页的内容：动态添加

2、两个变量：总页码数和当前选中的页码数

3、元素的创建，从左到右的顺序

4、函数：动态创建分页的html

5、定义函数：页码点击事件

1、分页器样式

<!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>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/page.css">
</head>

<body>
    <ul class="list">
        <!-- <li>
            <img src="image/t1.jpg" alt="">
            <span>夏天</span>
        </li>
      -->
    </ul>
    <!-- 分页器 -->
    <div class="ts-page">
        <!-- <span class="ts-start">首页</span>
        <span class="ts-before">上一页</span>
        <span class="ts-ell">...</span>
        <span class="page">1</span>
        <span class="page on ">2</span>
        <span class="page">3</span>
        <span class="page">4</span>
        <span class="page">5</span>
        <span class="ts-ell">...</span>
        <span class="ts-after">下一页</span>
        <span class="ts-end">尾页</span> -->
    </div>

    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/page.js"></script>
</body>

</html>


/* 分页器的css */

.ts-page {
    width: 100%;
    text-align: center;
    margin: 30px 0;
}

.ts-page span {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    text-align: center;
    background-color: #f5f5f5;
    font-size: 14px;
    cursor: pointer;
    margin: 0 4px;
}

.ts-page .ts-ell {
    cursor: auto;
    background-color: #f2f2f2;
    box-shadow: none;
    margin: 0;
}

.ts-page span.disable {
    cursor: not-allowed;
    color: #333;
}

.ts-page .page.on {
    background-color: green;
    color: #fff;
}

.list {
    width: 1200px;
    margin: 0 auto;
}

.list li {
    display: inline-block;
    padding: 10px;
    width: 276px;
    height: 300px;
    overflow: hidden;
    text-align: center;
}

.list li img {
    width: 276px;
    height: 276px;
}

.list li span {
    height: 40px;
    line-height: 40px;
}

2、思路：

（1）定义函数动态创建html

（2）添加点击事件

（3）网络请求获取服务端数据（接口来自哔哩哔哩尚学堂日报）

$(function() {
    // 思路：
    //1、分页的内容：动态添加
    //2、两个变量：总页码数和当前选中的页码数
    //3、元素的创建，从左到右的顺序
    //4、函数：动态创建分页的html
    //5、定义函数：页码点击事件

    //一、定义一个函数，动态创建html
    // addPage(1, 10);

    function addPage(current, maxPage) {
        //清空创建
        $(".ts-page").html('');
        //1、创建首页，上一页的html
        if (current > 1) {
            $(".ts-page").append('<span class="ts-start">首页</span> <span class="ts-before">上一页</span>');
        } else {
            $(".ts-page").append('<span class="ts-before disable">上一页</span>');
        }
        //2、创建首页，上一页，[...]
        if (current > 3 && current > 5) {
            $(".ts-page").append('<span class="ts-ell">...</span>');
        }
        //3、显示页码  从中间考虑 显示5个页码
        var start = current - 2;
        var end = current + 2;
        //特殊开头位置，如果当前位置等于1或者2
        if (current == 1 || current == 2) {
            start = 1;
            end = maxPage > 5 ? 5 : maxPage;
        }
        //特殊结尾位置，如果当前位置等于总页码数或者等于总页码-1
        if (current == maxPage || current == maxPage - 1) {
            start = maxPage - 4 > 0 ? maxPage - 4 : 1;
            end = maxPage;
        }
        for (; start <= end; start++) {
            if (start == current) {
                $(".ts-page").append(' <span class="page on">' + start + '</span>');
            } else {
                $(".ts-page").append(' <span class="page">' + start + '</span>');
            }
        }
        //4、显示【...】   总页码大于5并且当前页码小于总页码-2
        if (maxPage > 5 && current < maxPage - 2) {
            $(".ts-page").append('<span class="ts-ell">...</span>');
        }
        //5、显示下一页  尾页
        if (current < maxPage) {
            $(".ts-page").append('<span class="ts-after">下一页</span><span class="ts-end">尾页</span>');
        } else {
            $(".ts-page").append('<span class="ts-after disble">下一页</span>');

        }

    }

    //二、点击事件
    // addEvent(10);

    function addEvent(maxPage) {
        // 解绑on事件
        $('.ts-page').off("click");
        //1、点击中间页码，切换选中的页码
        $('.ts-page').on("click", ".page", function() {
            //获取页码
            var num = parseInt($(this).html());
            //切换选中内容
            // addPage(num, maxPage);
            //调用页码数据
            getDate(num);

        });

        //2、点击首页
        $('.ts-page').on("click", ".ts-start", function() {
            // addPage(1, maxPage);
            getDate(1);
        });
        // 3、点击尾页
        $('.ts-page').on("click", ".ts-end", function() {
            // addPage(maxPage, maxPage);
            getDate(maxPage);
        });
        //4、点击下一页
        //获取当前兄弟元素是on选中高亮的标签内容
        $('.ts-page').on("click", ".ts-after", function() {
            var num = parseInt($(this).siblings('.on').html());
            num++;
            if (num <= maxPage) {
                // addPage(num, maxPage)
                getDate(num);
            }
        });
        //5、点击上一页
        $('.ts-page').on("click", ".ts-before", function() {
            var num = parseInt($(this).siblings('.on').html());
            num--;
            if (num >= 1) {
                // addPage(num, maxPage)
                getDate(num);
            }
        });

    }

    // 三、网络请求
    //ajax请求分页数据，会多次触发
    // 页码做变量，函数获取数据
    getDate(1)

    function getDate(num) {
        $.get("http://iwenwiki.com/api/blueberrypai/getBlueBerryJamInfo.php", { blueBerryjam_id: num }, function(res) {
            console.log(res);
            var maxPage = res.maxPage;
            var arr = res.blueBerryJam;
            var str = '';
            for (var i = 0; i < arr.length; i++) {
                var newImg = arr[i].img.replace(/iwen.wiki\/sxtstu/g, 'iwenwiki.com/api');
                str += `<li>
             <img src="${newImg}" alt="">
             <span>${arr[i].title}</span>
         </li>`
            }
            $('.list').html(str);
            //页码插入数据完毕，才能显示分页
            addPage(num, maxPage);
            addEvent(maxPage);
            //点击分页，返回顶部浏览
            $(window).scrollTop(0);
        })
    }
})

把队友挂树上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分页器的实现——动态获取服务器的数据

1、分页器样式<!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"> <t
复制链接

扫一扫