Javascript编写数据表格：实现表格分页和排序 |21xrx.com

Javascript编写数据表格：实现表格分页和排序

2023-06-16 14:13:08 深夜i 17 0

Javascript 数据表格分页排序

在网页开发中，经常会用到数据表格展示，Javascript可以帮助我们实现表格分页和排序，让页面更加美观和易于浏览。

首先，我们需要准备一份数据源，例如一个包含多个字段的用户信息表。然后，我们可以通过Javascript编写代码实现数据的展示和整理。

以下是一个简单的Javascript代码片段，展示如何使用表格来展示用户信息并实现分页和排序的功能。

// 假设我们有一个包含多个字段的用户信息表格，我们可以通过Javascript来实现表格展示
// 获取table元素，并添加表头
const table = document.createElement('table');
const thead = document.createElement('thead');
const tr = document.createElement('tr');
const headers = ['id', 'name', 'age', 'email'];
headers.forEach((header) => {
 const th = document.createElement('th');
 th.innerText = header;
 tr.appendChild(th);
});
thead.appendChild(tr);
table.appendChild(thead);
// 假设我们有一个包含多个数据项的用户信息数据源，我们可以通过Javascript来实现表格数据展示
// 获取table元素，并添加表格数据
const tbody = document.createElement('tbody');
const data = [
  id: 1,
  id: 2,
  name: '王五',
  age: 28,
];
data.forEach((user) => {
 const tr = document.createElement('tr');
 headers.forEach((header) => {
  const td = document.createElement('td');
  td.innerText = user[header];
  tr.appendChild(td);
 });
 tbody.appendChild(tr);
});
table.appendChild(tbody);
document.body.appendChild(table);
// 实现表格分页和排序功能
function paginate(data, size, page) {
 return data.slice((page - 1) * size, page * size);
}
function sortData(data, column, order = 'asc') {
 return data.sort((a, b) => {
  if (order === 'desc') {
   return b[column] - a[column];
  }
  return a[column] - b[column];
 });
}
let currentPage = 1;
let pageSize = 2;
let sortedColumn = 'id';
let sortOrder = 'asc';
const paginationContainer = document.createElement('div');
const paginateData = () => {
 const sortedData = sortData(data, sortedColumn, sortOrder);
 const paginatedData = paginate(sortedData, pageSize, currentPage);
 tbody.innerHTML = '';
 paginatedData.forEach((user) => {
  const tr = document.createElement('tr');
  headers.forEach((header) => {
   const td = document.createElement('td');
   td.innerText = user[header];
   tr.appendChild(td);
  });
  tbody.appendChild(tr);
 });
 paginationContainer.innerHTML = `当前页数：${currentPage} 总共${data.length}条记录 分页大小：${pageSize} 总共${Math.ceil(
  data.length / pageSize
 )}页 上一页下一页`;
 paginationContainer.querySelector('.previous').addEventListener('click', (event) => {
  event.preventDefault();
  if (currentPage > 1) {
   currentPage -= 1;
   paginateData();
  }
 });
 paginationContainer.querySelector('.next').addEventListener('click', (event) => {
  event.preventDefault();
  const maxPage = Math.ceil(data.length / pageSize);
  if (currentPage < maxPage) {
   currentPage += 1;
   paginateData();
  }
 });
};
paginateData();
document.body.appendChild(paginationContainer);

通过上述代码，我们可以很容易地实现表格的展示以及一页页的分页和字段的排序功能。

上一篇: idea打包java可执行jar包

下一篇: 深入解析Java中的static关键字

评论区

相似文章