当前位置：首页 > news >正文

【js】js实现分页02

news 来源：原创 2024/5/18 17:34:57

实现效果

在这里插入图片描述

代码

<!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>列表和分页01</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 {
            border: 1px solid #666;
        }
    </style>
</head>

<body>
    <div class="main">
        <table id="myTable"></table>
        <div class="page">
            <button type="button" id="pageUp" onclick="prev()">上一页</button>
            <button type="button" id="pageDown" onclick="next()">下一页</button>
        </div>
        <div id="page2"></div>
        <div id="page3"></div>
    </div>
    <script>
        var myTable = document.getElementById('myTable')
        var prevBtn = document.getElementById("pageUp")
        var nextBtn = document.getElementById("pageDown")
        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 = dataAll.length;
        // 每页显示数量
        var pageSize = 5;
        // 分了几页
        var page = 1
        // 当前页
        var currentPage = 1
        // 定义全局变量
        tempStr = ''

        // 展示数据
        showData(dataAll)

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

        // 表格显示的数据
        function showData(data) {
            list = []
            data = data.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)
        }

        //根据情况判断，当currentPage处于第一页、最后一页button按钮不可用
        function btnDisabled() {
            if (currentPage <= 1) {
                prevBtn.disabled = true;
                nextBtn.disabled = false;
            } else if (currentPage >= total) {
                prevBtn.disabled = false;
                nextBtn.disabled = true;
            }
        }

        
        btnDisabled()

        // 上一页
        function prev() {
            currentPage = currentPage - 1
            showData(dataAll)
            btnDisabled()
            document.getElementById("page2").innerHTML = "共" + dataAll.length + "条记录 分" + page + "页 当前第" + currentPage + "页";
        }
        // 下一页
        function next() {
            currentPage = currentPage + 1
            showData(dataAll)
            btnDisabled()
            document.getElementById("page2").innerHTML = "共" + dataAll.length + "条记录 分" + page + "页 当前第" + currentPage + "页";
        }

        //分页详细信息
        tempStr = "共" + dataAll.length + "条记录 分" + page + "页 当前第" + currentPage + "页";
        document.getElementById("page2").innerHTML = tempStr

    </script>
</body>

</html>