Ajax实现分页功能

64次阅读
没有评论

实现 Ajax 分页功能的基本思路是,在前端页面中设置页码和每页显示数量,然后通过 Ajax 请求获取服务器端返回的数据,然后将数据渲染到页面上。以下是实现 Ajax 分页功能的详细步骤:

  1. 在前端页面中设置页码和每页显示数量。
<!-- 分页控件 -->
<div id="pagination">
  <button id="prev-btn">&lt; Prev</button>
  <span id="page-num"></span>
  <button id="next-btn">Next &gt;</button>
</div>

<!-- 列表内容 -->
<ul id="list"></ul>

<script>
  // 当前页码
  var currentPage = 1;
  // 每页显示数量
  var pageSize = 10;
</script>
  1. 在前端页面中设置点击事件监听器,当用户点击页码控件时,通过 Ajax 请求获取服务器端返回的数据。
// 获取分页控件元素
var pagination = document.getElementById('pagination');
var prevBtn = pagination.querySelector('#prev-btn');
var pageNumSpan = pagination.querySelector('#page-num');
var nextBtn = pagination.querySelector('#next-btn');

// 获取列表元素
var list = document.getElementById('list');

// 点击上一页按钮
prevBtn.addEventListener('click', function() {
  if (currentPage > 1) {
    currentPage--;
    loadPageData(currentPage);
  }
});

// 点击下一页按钮
nextBtn.addEventListener('click', function() {
  currentPage++;
  loadPageData(currentPage);
});

// 加载指定页码的数据
function loadPageData(pageNum) {
  // 发送 Ajax 请求
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://example.com/api/data?page=' + pageNum + '&pageSize=' + pageSize, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 处理响应数据
      var data = JSON.parse(xhr.responseText);
      renderData(data);
      // 更新页码控件
      pageNumSpan.innerHTML = 'Page ' + currentPage;
    }
  };
  xhr.send();
}

// 渲染数据到列表中
function renderData(data) {
  var html = '';
  data.forEach(function(item) {
    html += '<li>' + item.title + '</li>';
  });
  list.innerHTML = html;
}

// 加载第一页的数据
loadPageData(currentPage);

在上面的示例中,点击上一页或下一页按钮时,调用 loadPageData 函数来发送 Ajax 请求。该函数将当前页码和每页显示数量作为参数,拼接到 URL 中,发送 GET 请求获取服务器端返回的数据。当响应数据返回时,调用 renderData 函数将数据渲染到列表中。在 renderData 函数中,通过循环遍历响应数据中的每个元素,生成 HTML 代码,并将其插入到列表中。在 loadPageData 函数中,更新页码控件的内容,将当前页码显示出来。

需要注意的是,在实际开发中,需要根据实际情况调整代码,比如根据服务器端返回的总数据量,计算出总页数,并在控件中显示出来。

正文完
 
评论(没有评论)