html实现分页显示数据代码实例

在HTML中，你可以使用以下方法来分页显示数据：

使用CSS中的分页符：你可以使用CSS中的@page和page-break属性来定义页面的样式和分页方式。例如：

@media print {
  .page {
    page-break-after: always;
  }
}

在这个例子中，当打印页面时，.page元素后面会自动插入一个分页符，以便在打印时将内容分页显示。

使用JavaScript和CSS实现：你可以使用JavaScript和CSS来手动实现分页功能。具体来说，你可以根据每页显示的数据量和当前页数来动态地添加/移除HTML元素，从而实现分页效果。例如：

HTML代码：

<div id="data-container"></div>
<div id="pagination"></div>

JavaScript代码：

const data = [...]; // 数据数组
const pageSize = 10; // 每页显示的数据量
let currentPage = 1; // 当前页数

function renderData() {
  const start = (currentPage - 1) * pageSize;
  const end = start + pageSize;
  const pageData = data.slice(start, end);

  const dataContainer = document.getElementById('data-container');
  dataContainer.innerHTML = '';
  for (let item of pageData) {
    const div = document.createElement('div');
    div.textContent = item;
    dataContainer.appendChild(div);
  }
}

function renderPagination() {
  const totalPages = Math.ceil(data.length / pageSize);

  const pagination = document.getElementById('pagination');
  pagination.innerHTML = '';
  for (let i = 1; i <= totalPages; i++) {
    const button = document.createElement('button');
    button.textContent = i;
    button.addEventListener('click', () => {
      currentPage = i;
      renderData();
      renderPagination();
    });
    pagination.appendChild(button);
  }
}

renderData();
renderPagination();