数据表设置页码 - JavaScript

在前端开发中，我们经常需要展示大量的数据。如果这些数据过多，一次性全部呈现给用户可能不是最好的选择。一种常见的解决方案是将数据分成若干页，通过页码控制用户的浏览。在本文中，我们将讨论如何使用 JavaScript 实现数据表的页码设置。

准备工作

在实现页码设置之前，我们需要准备一些数据。假设我们的数据表格存在一个数组中，其中每个元素是一条数据。

const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 22 },
  { id: 4, name: 'David', age: 40 },
  { id: 5, name: 'Eve', age: 35 },
  // ...
];

我们将用这个数组来展示数据表格。

显示数据

首先，我们需要在页面中展示数据表格。为了简化问题，我们假设每页最多显示 3 条数据，因此需要将数据分成多个数组。

const pageSize = 3;
const pageCount = Math.ceil(data.length / pageSize);

const pages = [];
for (let i = 0; i < pageCount; i++) {
  pages.push(data.slice(i * pageSize, (i + 1) * pageSize));
}

console.log(pages);

这段代码将数据按照每页 3 条进行分页，结果将保存在一个 pages 数组中。我们可以通过控制台打印 pages 来查看分页结果。现在，我们需要将第一页的数据呈现在页面上。

const table = document.createElement('table');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');

table.appendChild(thead);
table.appendChild(tbody);

const tr = document.createElement('tr');
const thId = document.createElement('th');
thId.textContent = 'ID';
tr.appendChild(thId);
const thName = document.createElement('th');
thName.textContent = 'Name';
tr.appendChild(thName);
const thAge = document.createElement('th');
thAge.textContent = 'Age';
tr.appendChild(thAge);

thead.appendChild(tr);

for (let i = 0; i < pages[0].length; i++) {
  const tr = document.createElement('tr');
  const tdId = document.createElement('td');
  tdId.textContent = pages[0][i].id;
  tr.appendChild(tdId);
  const tdName = document.createElement('td');
  tdName.textContent = pages[0][i].name;
  tr.appendChild(tdName);
  const tdAge = document.createElement('td');
  tdAge.textContent = pages[0][i].age;
  tr.appendChild(tdAge);
  tbody.appendChild(tr);
}

document.body.appendChild(table);

这段代码将第一页的数据表格呈现在了页面上。我们新建了一个 <table> 元素，并且添加了表头和表身。然后，我们循环遍历第一页的数据，为每一行数据添加一个 <tr> 元素，并在其中添加 <td> 元素来呈现数据。

显示页码

现在，我们需要添加一个显示页码的功能，让用户能够翻页浏览多个页面。我们可以使用一个简单的算法，利用 JavaScript 动态地生成页码。

const pagination = document.createElement('div');

const pageButtons = [];
for (let i = 0; i < pageCount; i++) {
  const button = document.createElement('button');
  button.textContent = i + 1;
  button.addEventListener('click', () => {
    for (let j = 0; j < pageButtons.length; j++) {
      pageButtons[j].disabled = false;
    }
    button.disabled = true;

    tbody.innerHTML = '';

    for (let j = 0; j < pages[i].length; j++) {
      const tr = document.createElement('tr');
      const tdId = document.createElement('td');
      tdId.textContent = pages[i][j].id;
      tr.appendChild(tdId);
      const tdName = document.createElement('td');
      tdName.textContent = pages[i][j].name;
      tr.appendChild(tdName);
      const tdAge = document.createElement('td');
      tdAge.textContent = pages[i][j].age;
      tr.appendChild(tdAge);
      tbody.appendChild(tr);
    }
  });
  pageButtons.push(button);
  pagination.appendChild(button);
}

document.body.appendChild(pagination);

这段代码将页码按钮添加到了页面最下方。我们开始了一页一页的循环，对每一页生成一个按钮。当用户点击这个按钮时，我们将页面更新为新的一页。

为了避免重复添加代码，我们将页面更新逻辑封装成一个函数。

function updatePage(index) {
  tbody.innerHTML = '';

  for (let j = 0; j < pages[index].length; j++) {
    const tr = document.createElement('tr');
    const tdId = document.createElement('td');
    tdId.textContent = pages[index][j].id;
    tr.appendChild(tdId);
    const tdName = document.createElement('td');
    tdName.textContent = pages[index][j].name;
    tr.appendChild(tdName);
    const tdAge = document.createElement('td');
    tdAge.textContent = pages[index][j].age;
    tr.appendChild(tdAge);
    tbody.appendChild(tr);
  }
}

这样，我们就可以在按钮的点击事件处理程序中调用 updatePage() 函数，从而实现页面更新。

完整代码

下面是完整的代码：

const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 22 },
  { id: 4, name: 'David', age: 40 },
  { id: 5, name: 'Eve', age: 35 },
  // ...
];

const pageSize = 3;
const pageCount = Math.ceil(data.length / pageSize);

const pages = [];
for (let i = 0; i < pageCount; i++) {
  pages.push(data.slice(i * pageSize, (i + 1) * pageSize));
}

const table = document.createElement('table');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');

table.appendChild(thead);
table.appendChild(tbody);

const tr = document.createElement('tr');
const thId = document.createElement('th');
thId.textContent = 'ID';
tr.appendChild(thId);
const thName = document.createElement('th');
thName.textContent = 'Name';
tr.appendChild(thName);
const thAge = document.createElement('th');
thAge.textContent = 'Age';
tr.appendChild(thAge);

thead.appendChild(tr);

for (let i = 0; i < pages[0].length; i++) {
  const tr = document.createElement('tr');
  const tdId = document.createElement('td');
  tdId.textContent = pages[0][i].id;
  tr.appendChild(tdId);
  const tdName = document.createElement('td');
  tdName.textContent = pages[0][i].name;
  tr.appendChild(tdName);
  const tdAge = document.createElement('td');
  tdAge.textContent = pages[0][i].age;
  tr.appendChild(tdAge);
  tbody.appendChild(tr);
}

document.body.appendChild(table);

const pagination = document.createElement('div');

const pageButtons = [];
for (let i = 0; i < pageCount; i++) {
  const button = document.createElement('button');
  button.textContent = i + 1;
  button.addEventListener('click', () => {
    for (let j = 0; j < pageButtons.length; j++) {
      pageButtons[j].disabled = false;
    }
    button.disabled = true;
    
    updatePage(i);
  });
  pageButtons.push(button);
  pagination.appendChild(button);
}

document.body.appendChild(pagination);

function updatePage(index) {
  tbody.innerHTML = '';

  for (let j = 0; j < pages[index].length; j++) {
    const tr = document.createElement('tr');
    const tdId = document.createElement('td');
    tdId.textContent = pages[index][j].id;
    tr.appendChild(tdId);
    const tdName = document.createElement('td');
    tdName.textContent = pages[index][j].name;
    tr.appendChild(tdName);
    const tdAge = document.createElement('td');
    tdAge.textContent = pages[index][j].age;
    tr.appendChild(tdAge);
    tbody.appendChild(tr);
  }
}

这段代码演示了如何在页面中生成一个数据表，并添加页面分页功能。通过根据数据生成分页数组，我们可以通过动态生成页码按钮实现翻页浏览数据。