【学习笔记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"><span>
        <span class="total">1 / 100span>
        <span class="next">>span>
        <select>
            <option value="4">4option>
            <option value="8">8option>
            <option value="12">12option>
            <option value="16">16option>
        select>
    div>
    
    <ul>ul>
1
2
3
4
5
6
7
8
9
10
11
12
13

四、CSS代码

    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

五、JS代码

1、说明

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

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

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)
            */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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 + `
                

                    ${item.pic}" alt="">
                    
${item.name}
                    
城市：${item.city}
                    
地址：${item.address}
                    
价格：${item.price}
                    
时间：${item.showTime}
                
                `;
            }, '')

            // 调整页码信息
            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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93