js分页怎么显示多少条

JavaScript分页如何显示指定条目数

JavaScript分页的核心在于、数据分割、分页导航、动态显示数据。首先，我们需要将数据分割成多个页面，然后创建分页导航栏，最后根据用户点击的页面按钮动态显示数据。以下将详细解释这三个核心点，并提供相应的代码示例。

一、数据分割

数据分割是分页的基础。我们要将一组大数据集分成若干小的部分，每个部分称为一页。假设有一个包含100条记录的数据集，每页显示10条记录，那么数据集需要分成10页。

1.1、数据集和分页参数

假设我们有一个数组 data，包含所有的记录。我们需要两个参数：每页显示的记录数 pageSize 和当前页面 currentPage。

const data = [...Array(100).keys()]; // 示例数据数组
const pageSize = 10; // 每页显示10条记录
let currentPage = 1; // 当前页面，初始为第一页

1.2、计算总页数

总页数可以通过数据集的长度除以每页显示的记录数来计算。

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

1.3、获取当前页的数据

通过 currentPage 和 pageSize，我们可以计算出当前页应该显示的数据。

function getPaginatedData(data, pageSize, currentPage) {
  const startIndex = (currentPage - 1) * pageSize;
  return data.slice(startIndex, startIndex + pageSize);
}
const currentPageData = getPaginatedData(data, pageSize, currentPage);
console.log(currentPageData);

二、分页导航

分页导航是用户与分页系统交互的界面。它通常包括页面按钮（例如“上一页”、“下一页”）和数字按钮（例如“1”、“2”、“3”）。

2.1、创建分页按钮

我们需要一个函数来生成分页按钮。

function createPagination(totalPages, currentPage) {
  const pagination = document.createElement('div');
  pagination.className = 'pagination';
  if (currentPage > 1) {
    const prevButton = document.createElement('button');
    prevButton.innerText = 'Previous';
    prevButton.onclick = () => changePage(currentPage - 1);
    pagination.appendChild(prevButton);
  }
  for (let i = 1; i <= totalPages; i++) {
    const pageButton = document.createElement('button');
    pageButton.innerText = i;
    pageButton.className = currentPage === i ? 'active' : '';
    pageButton.onclick = () => changePage(i);
    pagination.appendChild(pageButton);
  }
  if (currentPage < totalPages) {
    const nextButton = document.createElement('button');
    nextButton.innerText = 'Next';
    nextButton.onclick = () => changePage(currentPage + 1);
    pagination.appendChild(nextButton);
  }
  return pagination;
}

2.2、渲染分页导航

我们需要一个函数来渲染分页导航，并在页面加载时调用它。

function renderPagination() {
  const paginationContainer = document.getElementById('pagination');
  paginationContainer.innerHTML = '';
  const pagination = createPagination(totalPages, currentPage);
  paginationContainer.appendChild(pagination);
}
document.addEventListener('DOMContentLoaded', () => {
  renderPagination();
});

三、动态显示数据

当用户点击分页按钮时，我们需要更新当前页面的数据和分页导航。

3.1、更新页面数据和导航

我们需要一个 changePage 函数来处理页面更改。

function changePage(page) {
  currentPage = page;
  const currentPageData = getPaginatedData(data, pageSize, currentPage);
  renderData(currentPageData);
  renderPagination();
}

3.2、渲染数据

我们需要一个函数来渲染当前页面的数据。

function renderData(data) {
  const dataContainer = document.getElementById('data');
  dataContainer.innerHTML = '';
  data.forEach(item => {
    const dataItem = document.createElement('div');
    dataItem.innerText = item;
    dataContainer.appendChild(dataItem);
  });
}
document.addEventListener('DOMContentLoaded', () => {
  const currentPageData = getPaginatedData(data, pageSize, currentPage);
  renderData(currentPageData);
});

四、实现代码示例

以下是一个完整的代码示例，将上述所有部分结合在一起。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Pagination</title>
  <style>
    .pagination button {
      margin: 5px;
    }
    .pagination .active {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="data"></div>
  <div id="pagination"></div>
  <script>
    const data = [...Array(100).keys()]; // 示例数据数组
    const pageSize = 10; // 每页显示10条记录
    let currentPage = 1; // 当前页面，初始为第一页
    const totalPages = Math.ceil(data.length / pageSize);
    function getPaginatedData(data, pageSize, currentPage) {
      const startIndex = (currentPage - 1) * pageSize;
      return data.slice(startIndex, startIndex + pageSize);
    }
    function createPagination(totalPages, currentPage) {
      const pagination = document.createElement('div');
      pagination.className = 'pagination';
      if (currentPage > 1) {
        const prevButton = document.createElement('button');
        prevButton.innerText = 'Previous';
        prevButton.onclick = () => changePage(currentPage - 1);
        pagination.appendChild(prevButton);
      }
      for (let i = 1; i <= totalPages; i++) {
        const pageButton = document.createElement('button');
        pageButton.innerText = i;
        pageButton.className = currentPage === i ? 'active' : '';
        pageButton.onclick = () => changePage(i);
        pagination.appendChild(pageButton);
      }
      if (currentPage < totalPages) {
        const nextButton = document.createElement('button');
        nextButton.innerText = 'Next';
        nextButton.onclick = () => changePage(currentPage + 1);
        pagination.appendChild(nextButton);
      }
      return pagination;
    }
    function renderPagination() {
      const paginationContainer = document.getElementById('pagination');
      paginationContainer.innerHTML = '';
      const pagination = createPagination(totalPages, currentPage);
      paginationContainer.appendChild(pagination);
    }
    function changePage(page) {
      currentPage = page;
      const currentPageData = getPaginatedData(data, pageSize, currentPage);
      renderData(currentPageData);
      renderPagination();
    }
    function renderData(data) {
      const dataContainer = document.getElementById('data');
      dataContainer.innerHTML = '';
      data.forEach(item => {
        const dataItem = document.createElement('div');
        dataItem.innerText = item;
        dataContainer.appendChild(dataItem);
      });
    }
    document.addEventListener('DOMContentLoaded', () => {
      const currentPageData = getPaginatedData(data, pageSize, currentPage);
      renderData(currentPageData);
      renderPagination();
    });
  </script>
</body>
</html>

通过以上代码示例，你可以实现一个简单的JavaScript分页系统，并根据需要进行扩展和定制。