开发一个具有分页功能的web表格组件

咕咕来砸米

已于 2023-06-16 01:32:32 修改

阅读量119

点赞数

分类专栏： javascript 文章标签：前端 html css

于 2023-06-05 22:00:34 首次发布

本文链接：https://blog.csdn.net/qq_51357129/article/details/131056861

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

此代码示例展示了一个使用JavaScript实现的动态分页Web表格，通过从服务器获取JSON数据并渲染到HTML表格中，同时提供了上一页和下一页的导航功能。表格内容包括人物的ID、姓名、性别和年龄。

摘要由CSDN通过智能技术生成

效果图

代码

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Web表格组件示例</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css" />
</head>

<body>
    <table id="data-table">
        <!-- 表头 -->
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <!-- 表体 -->
        <tbody id="data-body"></tbody>
    </table>
    <!-- 分页按钮 -->
    <div class="btn">
        <button id="prev-btn">上一页</button>
        <button id="next-btn">下一页</button>
    </div>
    <!-- 引入JavaScript文件 -->
    <script src="/js/index.js"></script>
</body>

</html>

index.css

table {
    border-collapse: collapse;
    text-align: center;
    margin: 0px auto;
}

table tr th {
    border-bottom: 2px gray solid;
    padding: 20px;
}

table tr td {
    border-bottom: 1px gray solid;
    padding: 10px;
}
.btn{
    text-align: center;
    margin: 20px;
}
.btn button{
    margin: 0px 12px;
}

index.js

// 定义表格组件
var DataTable = {
    items: [], // 数据数组
    pageSize: 10, // 每页数据条数
    currentPage: 1, // 当前页码
    maxPages: 5, // 最大页数

    // 获取数据
    fetchData: function() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                DataTable.items = JSON.parse(xhr.responseText);
                DataTable.maxPages = Math.ceil(DataTable.items.length / DataTable.pageSize);
                DataTable.renderTable();
            }
        };
        xhr.open('GET', '/json/index.json');
        xhr.send();
    },

    // 渲染表格
    renderTable: function() {
        var tbody = document.getElementById('data-body');
        var start = (DataTable.currentPage - 1) * DataTable.pageSize;
        var end = start + DataTable.pageSize;
        var itemsToShow = DataTable.items.slice(start, end);

        tbody.innerHTML = ''; // 清空表格

        for (var i = 0; i < itemsToShow.length; i++) {
            var item = itemsToShow[i];
            var row = '<tr><td>' + item.id + '</td><td>' + item.name + '</td><td>' + item.gender + '</td><td>' + item.age + '</td></tr>';
            tbody.innerHTML += row;
        }

        DataTable.updateNavButtons();
    },

    // 更新分页按钮
    updateNavButtons: function() {
        var prevBtn = document.getElementById('prev-btn');
        var nextBtn = document.getElementById('next-btn');

        if (DataTable.currentPage === 1) {
            prevBtn.disabled = true;
        } else {
            prevBtn.disabled = false;
        }

        if (DataTable.currentPage === DataTable.maxPages) {
            nextBtn.disabled = true;
        } else {
            nextBtn.disabled = false;
        }
    },

    // 上一页
    prevPage: function() {
        if (DataTable.currentPage > 1) {
            DataTable.currentPage--;
            DataTable.renderTable();
        }
    },

    // 下一页
    nextPage: function() {
        if (DataTable.currentPage < DataTable.maxPages) {
            DataTable.currentPage++;
            DataTable.renderTable();
        }
    }
};

// 加载数据
DataTable.fetchData();

// 绑定上一页和下一页按钮的事件监听器
document.getElementById('prev-btn').addEventListener('click', DataTable.prevPage);
document.getElementById('next-btn').addEventListener('click', DataTable.nextPage);

index.json

[
    {
        "id": 1,
        "name": "姬小满",
        "gender": "女",
        "age": 10
    },
    {
        "id": 2,
        "name": "海月",
        "gender": "女",
        "age": 7
    },
    {
        "id": 3,
        "name": "赵怀真",
        "gender": "男",
        "age": 82
    },
    {
        "id": 4,
        "name": "莱西奥",
        "gender": "男",
        "age": 22
    },
    {
        "id": 5,
        "name": "桑启",
        "gender": "男",
        "age": 87
    },
    {
        "id": 6,
        "name": "司空震",
        "gender": "男",
        "age": 69
    },
    {
        "id": 7,
        "name": "澜",
        "gender": "男",
        "age": 36
    },
    {
        "id": 8,
        "name": "夏洛特",
        "gender": "女",
        "age": 44
    },
    {
        "id": 9,
        "name": "蒙恬",
        "gender": "男",
        "age": 23
    },
    {
        "id": 10,
        "name": "阿古朵",
        "gender": "女",
        "age": 76
    },
    {
        "id": 11,
        "name": "镜",
        "gender": "女",
        "age": 67
    },
    {
        "id": 12,
        "name": "曜",
        "gender": "男",
        "age": 52
    },
    {
        "id": 13,
        "name": "云中君",
        "gender": "男",
        "age": 83
    },
    {
        "id": 14,
        "name": "瑶",
        "gender": "女",
        "age": 81
    },
    {
        "id": 15,
        "name": "盘古",
        "gender": "男",
        "age": 27
    },
    {
        "id": 16,
        "name": "猪八戒",
        "gender": "男",
        "age": 17
    },
    {
        "id": 17,
        "name": "司马懿",
        "gender": "男",
        "age": 55
    },
    {
        "id": 18,
        "name": "百里玄策",
        "gender": "男",
        "age": 23
    },
    {
        "id": 19,
        "name": "狂铁",
        "gender": "男",
        "age": 71
    },
    {
        "id": 20,
        "name": "米莱狄",
        "gender": "女",
        "age": 72
    },
    {
        "id": 21,
        "name": "嫦娥",
        "gender": "女",
        "age": 63
    },
    {
        "id": 22,
        "name": "大乔",
        "gender": "女",
        "age": 7
    },
    {
        "id": 23,
        "name": "明世隐",
        "gender": "男",
        "age": 20
    },
    {
        "id": 24,
        "name": "诸葛亮",
        "gender": "男",
        "age": 47
    },
    {
        "id": 25,
        "name": "哪吒",
        "gender": "男",
        "age": 95
    },
    {
        "id": 26,
        "name": "太乙真人",
        "gender": "男",
        "age": 34
    },
    {
        "id": 27,
        "name": "蔡文姬",
        "gender": "女",
        "age": 60
    },
    {
        "id": 28,
        "name": "虞姬",
        "gender": "女",
        "age": 78
    },
    {
        "id": 29,
        "name": "李元芳",
        "gender": "男",
        "age": 60
    },
    {
        "id": 30,
        "name": "张飞",
        "gender": "男",
        "age": 3
    },
    {
        "id": 31,
        "name": "刘备",
        "gender": "男",
        "age": 5
    },
    {
        "id": 32,
        "name": "后羿",
        "gender": "男",
        "age": 30
    },
    {
        "id": 33,
        "name": "牛魔",
        "gender": "男",
        "age": 75
    },
    {
        "id": 34,
        "name": "不知火舞",
        "gender": "女",
        "age": 11
    },
    {
        "id": 35,
        "name": "花木兰",
        "gender": "女",
        "age": 37
    },
    {
        "id": 36,
        "name": "张良",
        "gender": "男",
        "age": 61
    },
    {
        "id": 37,
        "name": "王昭君",
        "gender": "女",
        "age": 61
    },
    {
        "id": 38,
        "name": "韩信",
        "gender": "男",
        "age": 1
    },
    {
        "id": 39,
        "name": "安琪拉",
        "gender": "女",
        "age": 11
    },
    {
        "id": 40,
        "name": "貂蝉",
        "gender": "女",
        "age": 4
    },
    {
        "id": 41,
        "name": "老夫子",
        "gender": "男",
        "age": 97
    },
    {
        "id": 42,
        "name": "武则天",
        "gender": "女",
        "age": 53
    },
    {
        "id": 43,
        "name": "项羽",
        "gender": "男",
        "age": 88
    },
    {
        "id": 44,
        "name": "宫本武藏",
        "gender": "男",
        "age": 63
    },
    {
        "id": 45,
        "name": "典韦",
        "gender": "男",
        "age": 48
    },
    {
        "id": 46,
        "name": "甄姬",
        "gender": "女",
        "age": 8
    },
    {
        "id": 47,
        "name": "周瑜",
        "gender": "男",
        "age": 40
    },
    {
        "id": 48,
        "name": "孙膑",
        "gender": "男",
        "age": 35
    },
    {
        "id": 49,
        "name": "赵云",
        "gender": "男",
        "age": 85
    },
    {
        "id": 50,
        "name": "高渐离",
        "gender": "女",
        "age": 78
    }
]