js数据分页

绝地灬酷狼 2022-03-22 15:10 329阅读 0赞

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

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

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

实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70][]

具体代码：

基本页面代码：

<!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-size: 13px;
                background-color: transparent;
            }
            .btnNumber{
                margin: 0;
                padding: 0;
                overflow: hidden;
                float: left;
            }
            .btnNumber>li{
                list-style: none;
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                float: left;
                margin: 0 2px;
                border: 1px solid #f3f3f3;
                font-size: 13px;
                cursor: pointer;
            }
            .gopage span{
                display: block;
                float: left;
                font-size: 13px;
                line-height: 30px;
                width: 40px;
                height: 30px;
                border: 1px solid #f3f3f3;
                text-align: center;
            }
            .txtnum{
                float: left;
                width: 30px;
                height: 28px;
                outline: none;
                border: 1px solid #f3f3f3;
                text-align: center;
            }
            .gopage button{
                width: 70px;
                height: 30px;
                outline: none;
                border:1px solid #f3f3f3;
                float: left;
                margin: 0 10px;
                font-size: 13px;
                background-color: transparent;
            }
            #userover {
                background-color: #fdeaff;
                color: #00aaff;
            }
    
            #userleave {
                background-color: transparent;
                color: black;
            }
        </style>
    </head>
    <body>
        <div class="block">
            <div class="title">
                <ul>
                    <li>序号</li>
                    <li>姓名</li>
                    <li>性别</li>
                    <li>年龄</li>
                    <li>地址</li>
                    <li>电话</li>
                    <li>QQ</li>
                    <li>Email</li>
                    <li>毕业 (是/否)</li>
                    <li>结婚 (是/否)</li>
                </ul>   
            </div>
            <div id="content">
    
            </div>
            <div class="buttonNumber">
                <span class="totle">共<span>0</span>页</span>
                <button class="topPage">上一页</button>
                <ul class="btnNumber">
                </ul>
                <button class="downPage">下一页</button>
                <div class="gopage">
                    <span>到第</span>
                    <input class="txtnum" value="1" type="text"/>
                    <span>页</span>
                    <button id="choose">确定</button>
                </div>
            </div>
        </div>
        <script src="./js/data.js"></script>
        <script src="./js/index.js"></script>
    </body>
    </html>

js代码：

js数据格式：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70]: /images/20220322/156661ca0ab74b46b93b0e9bb796a22f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70 1]: /images/20220322/7b2570301d0f4dde9e94c5f71227337d.png