js实现分页点击跳转详解

分页是 Web 开发中常见的功能之一，它可以将大量的数据分成多页进行显示，方便用户查看和操作。在分页中，我们通常需要实现点击页码跳转到对应页的功能，下面是一个实现分页点击跳转的详解。

1. HTML 结构

首先，我们需要在 HTML 中构建分页的基本结构，例如：

<div class="pagination">
  <a href="#" class="prev">&lt;</a>
  <a href="#" class="page">1</a>
  <a href="#" class="page">2</a>
  <a href="#" class="page">3</a>
  <a href="#" class="next">&gt;</a>
</div>

其中，`.pagination` 是分页的容器，`.prev` 和 `.next` 分别表示上一页和下一页的按钮，`.page` 表示页码按钮。

2. CSS 样式

接着，我们需要为分页添加一些样式，例如：

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination a {
  display: inline-block;
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  color: #333;
}

.pagination a.prev,
.pagination a.next {
  font-weight: bold;
}

.pagination a.current {
  background-color: #333;
  color: #fff;
}

其中，我们使用了 Flex 布局来居中显示分页按钮，为按钮添加了一些基本样式，如边框、圆角、文本对齐等。我们还使用了 `.current` 类来表示当前页码的按钮。

3. JavaScript 实现

最后，我们需要使用 JavaScript 实现分页点击跳转的功能。我们可以为每个页码按钮添加一个点击事件监听器，当用户点击某个页码按钮时，我们就获取该按钮的页码值，并将该值传递给后端，后端返回对应页的数据，我们再将数据渲染到页面上。

var pagination = document.querySelector('.pagination');
var pages = pagination.querySelectorAll('.page');
var prevBtn = pagination.querySelector('.prev');
var nextBtn = pagination.querySelector('.next');
var currentPage = 1; // 当前页码

// 点击页码按钮
pages.forEach(function(page) {
  page.addEventListener('click', function() {
    var pageNum = parseInt(page.innerText);
    if (pageNum !== currentPage) {
      currentPage = pageNum;
      getData(currentPage); // 获取并渲染数据
    }
  });
});

// 点击上一页和下一页按钮
prevBtn.addEventListener('click', function() {
  if (currentPage > 1) {
    currentPage--;
    getData(currentPage); // 获取并渲染数据
  }
});

nextBtn.addEventListener('click', function() {
  if (currentPage < pages.length) {
    currentPage++;
    getData(currentPage); // 获取并渲染数据
  }
});

// 获取并渲染数据
function getData(pageNum) {
  // 发送 AJAX 请求获取数据
  // ...

  // 渲染数据
  // ...
}

在上面的代码中，我们为每个页码按钮添加了一个点击事件监听器，当用户点击某个页码按钮时，我们获取该按钮的页码值，并将该值传递给 `getData` 函数。在 `getData` 函数中，我们使用 AJAX 发送请求，获取对应页的数据，并将数据渲染到页面上。

此外，我们还为上一页和下一页按钮添加了点击事件监听器，实现了翻页功能。

总结

以上就是实现分页点击跳转的详解，我们需要在 HTML 中构建分页的基本结构，在 CSS 中为分页添加样式，在 JavaScript 中实现点击页码跳转的功能。