js数据分页

最新推荐文章于 2024-07-01 11:34:43 发布

ICY___

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量1.7k

点赞数 1

分类专栏： ICY___的js进阶文章标签：数据分页

本文链接：https://blog.csdn.net/ICY___/article/details/86683903

版权

这个案例大概是半个月之前做的，由于当时做完以后觉得比较难以接受且不太好理解（代码也比较多一点），就先将它放下了，沉淀过后，我觉得是时候拿出来与大家分享了！

整体思想框架：（我想把这些注释拿出来会更好一些）提前剧透一下，个人认为数据分页的页码算法是最复杂的，同时和图片轮播一样，关于当前页的bug会比较多，毕竟到达所需页的执行方式有多种（点击翻页页、点击页数、点击跳转页、三者混合操作），所以就需要我们用心一点，耐心的调试bug，毕竟，bug是不可能一次改完的，尤其是第一次做的话，不要怕有bug，多利用打断点调试和console.log() 调试，你会更加深刻的理解这一切！

// 总体思想在每页上显示定量的数据，通过点击具体的页数以及翻页和跳转来实现翻页的效果
// 利用面向对象的开发方法，将所需的变量定义，然后根据需要去调用
// 建立计算总页数函数、当前页函数、创建页面数据函数、创建点击类总函数、创建页数显示函数
// 进行元素之间的相互调用首先实现在页面上显示初始页的值和实现下方翻页按钮的功能（跳转由于需要多页测试，可以最后再写）
// 然后在按钮上绑定点击事件，完成翻页的功能
// 测试，调试bug
// 实现其它的附加功能

实现效果：

具体代码：

基本页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据分页</title>
    <style>
        .block{
            position: relative;
            margin: 0 auto;
            width: 1190px;
            height: 600px;
            border: 1px solid silver;
        }
        .title ul{
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: linear-gradient(#b5faff,deepskyblue);
            position: relative;
        }
        .title li{
            list-style: none;
            float: left;
            width: 119px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        #content{
            width: 1190px;
            height: 500px;
            position: relative;
        }
        .user-data ul{
            background: transparent !important;
            border-bottom: 1px solid silver;
        }
        .user-data ul li{
            height: 30px !important;
            line-height: 30px !important;
            font-size: 13px;
        }
        .buttonNumber{
            overflow: hidden;
            padding: 15px 20px

        }
        .totle{
            display: block;
            float: left;
            width: 60px;
            height: 30px;
            border: 1px solid #f3f3f3;
            text-align: center;
            line-height: 30px;
            font-size: 13px;
        }
        .topPage,.downPage{
            width: 70px;
            height: 30px;
            outline: none;
            border:1px solid #f3f3f3;
            float: left;
            margin: 0 5px;
            font-siz

最低0.47元/天解锁文章

ICY___

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js数据分页

这个案例大概是半个月之前做的，由于当时做完以后觉得比较难以接受且不太好理解（代码也比较多一点），就先将它放下了，沉淀过后，我觉得是时候拿出来与大家分享了！整体思想框架：（我想把这些注释拿出来会更好一些）提前剧透一下，个人认为数据分页的页码算法是最复杂的，同时和图片轮播一样，关于当前页的bug会比较多，毕竟到达所需页的执行方式有多种（点击翻页页、点击页数、点击跳转页、三者混合操作），所以就...
复制链接

扫一扫

专栏目录