广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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

一、动态创建表格

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

在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实现表格数据的分页显示的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~