使用JavaScript实现表格数据的分页显示

随着数据的不断增长，表格显示变得更加困难。大多数情况下，表格中的数据量过大，导致表格在加载时变得缓慢，而且用户需要不断地浏览页面才能找到自己想要的数据。本文将介绍如何使用JavaScript实现表格数据的分页显示，让用户更容易找到自己想要的数据。

一、动态创建表格

为了使分页功能更加可控，需要动态创建表格。在HTML页面中，添加一个类似于下面的table元素。

037aedbe5a4d72e3d88250e75e38381c

编号	姓名	年龄	性别
1	小红	20	女
2	小明	22	男
3	小花	25	女

在JavaScript中，先定义一个包含所有表格数据的数组：

let tableData = [
{ id: 1, name: '小红', age: 20, gender: '女' },
{ id: 2, name: '小明', age: 22, gender: '男' },
{ id: 3, name: '小花', age: 25, gender: '女' },
// 更多数据
];

接下来，创建一个名为“createTable”的函数，这个函数将创建空的table元素并将其插入到HTML页面中。

// 创建表格
function createTable() {
let table = document.createElement('table'); // 创建table元素
table.id = 'table-page'; // 设置id
table.classList.add('table'); // 添加样式
let thead = document.createElement('thead');
let tr = document.createElement('tr');
let thNum = document.createElement('th');
thNum.innerHTML = '编号';
tr.appendChild(thNum);
let thName = document.createElement('th');
thName.innerHTML = '姓名';
tr.appendChild(thName);
let thAge = document.createElement('th');
thAge.innerHTML = '年龄';
tr.appendChild(thAge);
let thGender = document.createElement('th');
thGender.innerHTML = '性别';
tr.appendChild(thGender);
thead.appendChild(tr);
table.appendChild(thead);
let tbody = document.createElement('tbody');
table.appendChild(tbody);
document.body.appendChild(table);
}

现在，调用createTable函数来创建表格。

createTable();

二、添加分页

在JavaScript中，新建一个函数名为“pagination”，该函数将根据所需的每页数据量和当前页码来过滤表格数据，并将结果显示在表格中。

// 分页函数
function pagination(pageSize, pageNumber) {
let table = document.getElementById('table-page');
let tbody = table.querySelector('tbody');
let start = pageSize * (pageNumber - 1);
let end = start + pageSize;
let d = tableData.slice(start, end);
tbody.innerHTML = '';
for (let i = 0; i < d.length; i++) {

let tr = document.createElement('tr');
for (let key in d[i]) {
  let td = document.createElement('td');
  td.innerHTML = d[i][key];
  tr.appendChild(td);
}
tbody.appendChild(tr);

}
}

在这个函数中，首先获取table元素和tbody元素。然后，通过指定的每页数据量和当前页码来计算要显示的数据范围。然后，通过使用slice方法来获取当前页要显示的数据，并将其循环添加到表格的tbody元素中。

三、创建分页组件

接下来，创建一个名为“createPagination”的函数来生成分页组件。

// 创建分页按钮组件
function createPagination(pageSize) {
let totalPage = Math.ceil(tableData.length / pageSize);
let pagination = document.getElementById('pagination');
if (!pagination) {

pagination = document.createElement('div');
pagination.id = 'pagination';
document.body.appendChild(pagination);

}
pagination.innerHTML = '';
for (let i = 1; i <= totalPage; i++) {

let btn = document.createElement('button');
btn.innerHTML = i;
btn.onclick = function() {
  pagination(pageSize, i)
};
pagination.appendChild(btn); 

}
}

本函数将计算所有的页数，并基于每页数量生成按钮组件。在循环中，每个按钮被创建并附加到“pagination”元素上。最后，将按钮的点击事件设置为调用分页函数“pagination（）”。

四、应用到实际项目中

在实际项目中，可以将tableData数组替换为从服务器获取的数据，并根据需要调用创建表格和分页函数。

// 异步请求数据
let xhr = new XMLHttpRequest();
xhr.open('GET', '/getData');
xhr.onload = function() {
let data = JSON.parse(xhr.responseText);
tableData = data;
createTable();
pagination(pageSize, pageNumber);
createPagination(pageSize);
}
xhr.send();

在这个示例中，使用XMLHttpRequest对象异步获取数据。然后，将数据解析为JSON对象，并分别调用createTable，pagination和createPagination函数。

五、总结

通过上述步骤，我们成功地使用JavaScript实现了分页显示表格数据的基本功能。当数据量较大时，这种方法将大大提高表格的性能，同时也为用户提供更好的交互体验。毕竟，方便简单的用户体验才是软件的魅力所在。

以上是使用JavaScript实现表格数据的分页显示的详细内容。更多信息请关注PHP中文网其他相关文章！