分页显示是Web应用开发中常用的一种技术，通过将数据划分为多个页面进行显示，可以提高页面加载速度和用户的交互体验。在实际开发过程中，我们通常使用JavaScript实现表格数据的分页显示。本文将介绍如何使用JavaScript实现表格数据的分页显示，包括如何获取数据、如何分页、如何显示分页数据等内容。
1. 获取数据
在实现分页显示之前，首先需要获取需要显示的数据。我们可以使用Ajax技术获取后台数据，也可以将数据直接嵌入到页面中。以嵌入数据为例，以下是一个包含数据的表格：
<table id="table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>赵六</td>
<td>19</td>
<td>女</td>
</tr>
<tr>
<td>钱七</td>
<td>21</td>
<td>男</td>
</tr>
<tr>
<td>孙八</td>
<td>23</td>
<td>女</td>
</tr>
</tbody>
</table>
2. 分页
在获取到需要显示的数据后，我们需要将数据进行分页处理。在此，我们将数据分为每页3条记录，以下是一个简单的分页函数：
function paginate(items, page, per_page) {
var offset = (page - 1) * per_page,
paginatedItems = items.slice(offset).slice(0, per_page),
total_pages = Math.ceil(items.length / per_page);
return {
page: page,
per_page: per_page,
pre_page: page - 1 ? page - 1 : null,
next_page: (total_pages > page) ? page + 1 : null,
total: items.length,
total_pages: total_pages,
data: paginatedItems
};
}
该函数接受三个参数：items表示需要进行分页的数据，page表示当前页数，per_page表示每页显示的条数。函数返回一个对象，其中包含了分页后的数据和相关信息。具体来说，该函数将数据根据page和per_page进行切割，然后计算出总页数(total_pages)，当前页数(page)、本次分页数据条数(per_page)、上一页(page - 1)和下一页(page + 1)等信息。使用该函数可以轻松实现数据分页，下面是一个例子：
var items = [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 22, gender: '女' },
{ name: '王五', age: 25, gender: '男' },
{ name: '赵六', age: 19, gender: '女' },
{ name: '钱七', age: 21, gender: '男' },
{ name: '孙八', age: 23, gender: '女' }
];
var per_page = 3;
var page = 1;
var paginatedItems = paginate(items, page, per_page);
console.log(paginatedItems); // { page: 1, per_page: 3, pre_page: null, next_page: 2, total: 6, total_pages: 2, data: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 22, gender: '女' }, { name: '王五', age: 25, gender: '男' } ] }
3. 显示分页数据
在实现了数据分页后，我们需要将分页后的数据进行显示。具体来说，我们需要根据分页信息生成页码列表，并将数据显示在页面上。以下是一个简单的显示函数：
function showTable(paginatedItems) {
var table = document.getElementById('table');
var tbody = table.getElementsByTagName('tbody')[0];
tbody.innerHTML = '';
for (var i = 0; i < paginatedItems.data.length; i++) {
var row = tbody.insertRow(i);
var data = paginatedItems.data[i];
for (var j in data) {
var cell = row.insertCell(j);
cell.innerHTML = data[j];
}
}
}
function showPagination(paginatedItems) {
var pagination = document.getElementById('pagination');
pagination.innerHTML = '';
var page = paginatedItems.page,
total_pages = paginatedItems.total_pages;
var pageStart = page - 2 > 0 ? page - 2 : 1,
pageEnd = page + 2 < total_pages ? page + 2 : total_pages;
var ul = document.createElement('ul');
var li = document.createElement('li');
li.innerHTML = '<a href="#">?</a>';
if (paginatedItems.pre_page) {
li.querySelector('a').addEventListener('click', function () {
showPage(paginatedItems.pre_page);
});
} else {
li.className = 'disabled';
}
ul.appendChild(li);
for (var i = pageStart; i <= pageEnd; i++) {
var li = document.createElement('li');
li.innerHTML = '<a href="#">' + i + '</a>';
if (i == page) {
li.className = 'active';
} else {
li.querySelector('a').addEventListener('click', function () {
var page = parseInt(this.innerHTML);
showPage(page);
});
}
ul.appendChild(li);
}
var li = document.createElement('li');
li.innerHTML = '<a href="#">?</a>';
if (paginatedItems.next_page) {
li.querySelector('a').addEventListener('click', function () {
showPage(paginatedItems.next_page);
});
} else {
li.className = 'disabled';
}
ul.appendChild(li);
pagination.appendChild(ul);
}
function showPage(page) {
var paginatedItems = paginate(items, page, per_page);
showTable(paginatedItems);
showPagination(paginatedItems);
}
var items = [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 22, gender: '女' },
{ name: '王五', age: 25, gender: '男' },
{ name: '赵六', age: 19, gender: '女' },
{ name: '钱七', age: 21, gender: '男' },
{ name: '孙八', age: 23, gender: '女' }
];
var per_page = 3;
showPage(1);
该函数接受分页信息作为参数，然后生成页码列表并将数据显示到页面上。具体来说，该函数使用document.createElement和document.createTextNode方法创建节点，然后使用appendChild将节点添加到页面上。在生成页码列表时，该函数使用了一些CSS样式，以美化样式。
总结
本文介绍了如何使用JavaScript实现表格数据的分页显示，包括如何获取数据、如何分页、如何显示分页数据等内容。在实际开发中，我们可以根据实际需求对代码进行修改和扩展，以满足不同的需求。