效果图
代码
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
}
]