您的位置：首页 > 教程笔记 > 前端笔记

js分页查询怎么实现

2024-06-22 12:21:15 前端笔记 180

JS 分页查询实现

JS 实现分页查询的主要步骤如下：

1. 获取数据并划分页面：

从服务器获取数据并存储在数组或列表中。
根据每页要显示的数据量，将数据划分为多个页面。

2. 创建页面导航控件：

创建一个包含页面链接或按钮的导航控件。
每个链接或按钮对应一个页面。

3. 更新页面内容：

当用户点击一个页面链接或按钮时，获取该页面的数据。
使用 JavaScript 更新页面内容以显示当前页面的数据。

4. 记录当前页面：

跟踪用户当前所在的页面，通常使用一个变量或 cookie。

5. 加载更多数据（可选）：

如果有更多数据，可以提供一个“加载更多”按钮或自动加载更多数据。
获取下一页数据并更新页面内容。

示例实现：

// 1. 获取数据并划分页面
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const pageSize = 5;
const pages = [];
for (let i = 0; i  {
  const link = document.createElement("a");
  link.href = "#";
  link.textContent = index + 1;
  link.addEventListener("click", (e) =&gt; {
    e.preventDefault();
    showPage(index);
  });
  nav.appendChild(link);
});

// 3. 更新页面内容
function showPage(index) {
  const pageData = pages[index];
  const output = document.getElementById("output");
  output.innerHTML = "";
  pageData.forEach(item =&gt; {
    const li = document.createElement("li");
    li.textContent = item;
    output.appendChild(li);
  });
}

// 4. 记录当前页面
let currentPage = 0;

// 5. 加载更多数据（可选）
const loadMoreBtn = document.getElementById("load-more");
loadMoreBtn.addEventListener("click", () =&gt; {
  if (currentPage