【js】js实现分页01

maozuai~zi

已于 2022-09-01 10:43:36 修改

阅读量1.2k

点赞数 2

分类专栏： js 文章标签： javascript html

于 2022-09-01 10:25:14 首次发布

本文链接：https://blog.csdn.net/qq_36557846/article/details/126637949

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

实现效果如图

在这里插入图片描述

代码实现

1、页数 = 数据总个数/每页数量，如果有余数，则加一
2、上一页、下一页：从总数据中取出对应页码的数据
3、点击1 2 3 4 就显示总数据中对应页码的数据
4、点击1 2 3 4为dom增加选中样式，找选中节点的兄弟节点不好找可以使用for循环来判断给谁加选中样式

<!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>列表和分页02</title>
    <style>
        #myTable {
            width: 100%;
            border-collapse: collapse;
        }

        #myTable td {
            border: 1px solid #666;
            padding: 8px;
        }

        .page {
            padding-top: 10px;
            width: 260px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .page button {
            padding: 5px;
        }

        .border,
        .currentDiv {
            margin-top: 10px;
            border: 1px solid rgb(8, 8, 7);
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            display: inline-block;
            margin-right: 10px;
        }

        #pageUp,
        #pageDown {
            width: 100px;
            height: 30px;
            display: inline-block;
            margin-right: 10px;
        }

        .currentDiv {
            background: rgb(8, 8, 7);
            color: #fff;
            width: 30px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="main">
        <table id="myTable"></table>
        <div id="page4"></div>
    </div>
    <script>
        var myTable = document.getElementById('myTable')
        var dataAll = [{
            name: '01wangjie',
            age: 1,
            like: '足球'
        }, {
            name: '02wangjie',
            age: 2,
            like: '足球'
        }, {
            name: '03wangjie',
            age: 3,
            like: '足球'
        }, {
            name: '04wangjie',
            age: 4,
            like: '足球'
        }, {
            name: '05wangjie',
            age: 5,
            like: '足球'
        }, {
            name: '06wangjie',
            age: 6,
            like: '足球'
        }, {
            name: '07wangjie',
            age: 7,
            like: '足球'
        }, {
            name: '08wangjie',
            age: 8,
            like: '足球'
        }, {
            name: '09wangjie',
            age: 9,
            like: '足球'
        }, {
            name: '10wangjie',
            age: 10,
            like: '足球'
        }, {
            name: '11wangjie',
            age: 11,
            like: '足球'
        }, {
            name: '12wangjie',
            age: 12,
            like: '足球'
        }, {
            name: '13wangjie',
            age: 13,
            like: '足球'
        }, {
            name: '14wangjie',
            age: 14,
            like: '足球'
        }, {
            name: '15wangjie',
            age: 15,
            like: '足球'
        }, {
            name: '16wangjie',
            age: 16,
            like: '足球'
        },]
        var list = ''
        // 分页
        // 总页数
        var total = 0;
        // 每页显示数量
        var pageSize = 5;
        // 分了几页
        var page = 1
        // 当前页
        var currentPage = 1
        // 定义全局变量
        tempStr = ''

        // 展示数据
        showData()

        if (dataAll.length / pageSize > parseInt(dataAll.length / pageSize)) {
            page = parseInt(dataAll.length / pageSize) + 1
        } else {
            page = dataAll.length / pageSize
        }

        // 表格显示的数据
        function showData() {
            list = []
            data = dataAll.slice(pageSize * (currentPage - 1), currentPage * pageSize)
            data.forEach(item => {
                list = list + `<tr><td>${item.name}</td><td>${item.age}</td><td>${item.like}</td></tr>`
            })
            myTable.innerHTML = list
        }

        //总共分几页
        if (dataAll.length / pageSize > parseInt(dataAll.length / pageSize)) {
            total = parseInt(dataAll.length / pageSize) + 1
        } else {
            total = parseInt(dataAll.length / pageSize)
        }



        //动态生成分页样式:1 2 3 4 5 6 
        var list = ''
        for (var j = 0; j < page; j++) {
            // 页面初始化的时候，选中第一页
            if (j === 0) {
                list = list + `<button type="button" class="border currentDiv" οnclick="changeData(${j})">${j + 1}</button>`
            } else {
                list = list + `<button type="button" class="border" οnclick="changeData(${j})">${j + 1}</button>`
            }

        }
        list = '<button id="pageUp" οnclick="prev()">上一页</button>' + list + '<button id="pageDown" οnclick="next()">下一页</button>'
        var page4 = document.getElementById("page4")
        page4.innerHTML = list

        // 分页1 2 3 4添加选中样式
        function addCurrentClass(page) {
            var pageFenye = document.getElementsByClassName("border")
            for (i = 0; i < pageFenye.length; i++) {
                if (i === page) {
                    pageFenye[i].setAttribute('class', 'border currentDiv')
                } else {
                    pageFenye[i].setAttribute('class', 'border')
                }
            }
        }

        // 点击分页1 2 3 4触发的事件
        function changeData(page) {
            currentPage = page + 1
            showData()
            btnDisabled()
            addCurrentClass(page)
        }

        // 上一页下一页按钮
        var prevBtn = document.getElementById("pageUp")
        var nextBtn = document.getElementById("pageDown")
        // 判断上一页下一页可用不可用
        function btnDisabled() {
            if (currentPage <= 1) {
                prevBtn.disabled = true;
                //nextBtn.disabled = false;
            } else if (currentPage >= total) {
                nextBtn.disabled = true;
            } else {
                prevBtn.disabled = false;
                nextBtn.disabled = false;
            }
        }


        // 上一页
        function prev() {            
            currentPage = currentPage - 1
            showData()
            btnDisabled()
            addCurrentClass(currentPage -1)
            
        }
        // 下一页
        function next() {            
            currentPage = currentPage + 1
            console.log('下一页中的currentPage', currentPage)
            showData()
            btnDisabled()
            addCurrentClass(currentPage -1)
        }
        btnDisabled()
    </script>
</body>

</html>