【学习笔记45】JavaScript的分页效果

---

highlight: an-old-hope

一、分页效果

(一) 首次打开页面

1. 从数组内截取部分数据展示
2. 调整页码信息为：当前页 / 总页码
3. 处理按钮
   • 3.1 如果当前在第一页，禁用上一页按钮(添加类名disable)
   • 3.2 如果当前页在最后一页(当前页 === 总页码),禁用下一页按钮(添加类名disable)

(二) 点击下一页

1. 当前页++
2. 从数组内截取部分数据展示
3. 调整页码信息为：当前页 / 总页码
4. 处理按钮
   • 4.1 如果当前在第一页，禁用上一页按钮(添加类名disable)
   • 4.2 如果当前页在最后一页(当前页 === 总页码),禁用下一页按钮(添加类名disable)

(三) 点击上一页

1. 当前页–
2. 从数组内截取部分数据展示
3. 调整页码信息为：当前页 / 总页码
4. 处理按钮
   • 4.1 如果当前在第一页，禁用上一页按钮(添加类名disable)
   • 4.2 如果当前页在最后一页(当前页 === 总页码),禁用下一页按钮(添加类名disable)

(四) 改变每页展示数据

1. 修改每页展示数据
2. 从数组内截取部分数据展示
3. 调整页码信息为：当前页 / 总页码
4. 处理按钮
   • 4.1 如果当前在第一页，禁用上一页按钮(添加类名disable)
   • 4.2 如果当前页在最后一页(当前页 === 总页码),禁用下一页按钮(添加类名disable)

二、案例分析

三、HTML代码

    <div class="pagination">
        <span class="prev disable">&lt;</span>
        <span class="total">1 / 100</span>
        <span class="next">&gt;</span>
        <select>
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
        </select>
    </div>
    <!-- 动态渲染页面 -->
    <ul></ul>

四、CSS代码

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>img {
            width: 278px;
            display: block;
        }

        .pagination {
            width: 1200px;
            margin: 10px auto;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .pagination>.prev,
        .pagination>.next {
            width: 50px;
            height: 30px;
            cursor: pointer;
            background-color: orange;
            font-size: 24px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pagination>.disable {
            cursor: not-allowed;
            background-color: #ccc;
        }

        .pagination>.total {
            font-size: 30px;
            font-weight: 700;
            margin: 0 20px;
        }

        .pagination>select {
            font-size: 22px;
            padding-left: 20px;
            margin-left: 30px;
        }
    </style>

五、JS代码

1、说明

模拟数据库，外部导入数据

    <script src="./dm_list.js"></script>

2、从数组内截取部分数据展示

           /**
             *  1.1 从数组内截取部分数据展示
             * 
             *  从哪里截取到哪?
             * 
             *      假设当前每页展示4条数据
             *          第1页 展示4条        ---> [0]~[3]
             *          第2页 展示4条        ---> [4]~[7]
             *          第3页 展示4条        ---> [8]~[11]
             * 
             *      假设当前每页展示8条数据
             *          第1页 展示8条        ---> [0]~[7]
             *          第2页 展示8条        ---> [8]~[15]
             * 
             *      开始下标：(当前页 - 1) * 每页展示多少条
             *          (1 - 1) * 4  === 0
             *          (2 - 1) * 4  === 4
             *          (3 - 1) * 4  === 8
             *      结束下标：当前页 * 每页展示多少 - 1
             *          1 * 4  - 1   == 3
             *          2 * 4  - 1   == 7
             *          3 * 4  - 1   == 11
              * 
             *      假设当前页为 currentNum     每页展示 pageSize 条 数据
             *          开始下标:  (currentNum - 1) * pageSize
             *          结束下标: currentNum * pageSize - 1
             * 
             *      使用 数组.slice(开始下标, 结束下标)  包前不包后
             *              ---> 数组.slice((currentNum - 1) * pageSize, currentNum * pageSize - 1 + 1)
             *              ---> 数组.slice((currentNum - 1) * pageSize, currentNum * pageSize)
            */

3、代码实现

    <script>
        // 0. 获取标签对象
        const oUl = document.querySelector('ul');                //获取ul标签
        const oTotal = document.querySelector('.total');         //页码信息
        const oPrev = document.querySelectorAll('span')[0];      //上一页
        const oNext = document.querySelectorAll('span')[2];      //下一页
        const OSelect = document.querySelector('select');        //选择页面

        // 1. 定义变量 存储数据
        let currentNum = 1;      //当前页面
        let pageSize = 4;        //展示几条数据
        let totalNum = 0;        //总页面

        // 2. 页面渲染函数
        function myFn() {
            // 从数组中截取数据
            let newList = list.slice((currentNum - 1) * pageSize, currentNum * pageSize);

            // 将截取的数据，渲染到页面中
            oUl.innerHTML = newList.reduce(function (prev, item) {
                return prev + `
                <li>
                    <img src="${item.pic}" alt="">
                    <p>${item.name}</p>
                    <p>城市：${item.city}</p>
                    <p>地址：${item.address}</p>
                    <p>价格：${item.price}</p>
                    <p>时间：${item.showTime}</p>
                </li>
                `;
            }, '')

            // 调整页码信息
            totalNum = Math.ceil(list.length / pageSize);

            // 将页码信息渲染到页面去
            oTotal.innerHTML = `${currentNum}/${totalNum}`;

            // 处理按钮
            // 如果当前在第一页，禁用上一页按钮 (添加类名disable)
            // if (currentNum === 1) {

            //     oPrev.className = 'prev disable';

            // } else {

            //     oPrev.className = 'prev disable';
            // }

            // 三元运算符
            // currentNum === 1 ? oPrev.className = 'prev disable' : oPrev.className = 'prev';
            oPrev.className = currentNum === 1 ? 'prev disable' : 'prev';

            // 如果当前页在最后一页(当前页 === 总页码)禁用下一页按钮 (添加类名disable)
            oNext.className = currentNum === totalNum ? 'prev disable' : 'prev';
  
        }

        // 3. 首页打开页面 直接调用函数
        myFn();

        // 4. 点击下一页，下一页的效果
        oNext.addEventListener('click', function(){
            // 边界判断
            if (currentNum == totalNum) return;

            // 当前页面++
            currentNum++;

            // 调用函数 渲染页面
            myFn();
        })

        oPrev.addEventListener('click', function(){
            // 边界判断
            if (currentNum == 1) return;

            // 当前页面++
            currentNum--;

            // 调用函数 渲染页面
            myFn();
        })

        // 5. 改变页面展示数据
        OSelect.addEventListener('change', function(){
            pageSize = OSelect.value;

            currentNum = 1;
            // 调用函数 渲染页面
            myFn();
        })
    </script>