当前位置：首页 > jquery

jquery实现分页

2026-02-03 18:07:28jquery

jQuery 实现分页的方法

基本分页结构

使用 jQuery 实现分页通常需要结合 HTML 结构和事件监听。以下是一个简单的分页实现方式：

<div class="pagination">
  <a href="#" class="prev">上一页</a>
  <a href="#" class="page">1</a>
  <a href="#" class="page">2</a>
  <a href="#" class="page">3</a>
  <a href="#" class="next">下一页</a>
</div>
<div class="content">
  <!-- 分页内容区域 -->
</div>

分页逻辑实现

通过 jQuery 监听分页按钮点击事件，动态加载或显示内容：

$(document).ready(function() {
  $('.page').click(function(e) {
    e.preventDefault();
    var pageNum = $(this).text();
    loadPage(pageNum);
  });

  $('.prev').click(function(e) {
    e.preventDefault();
    var currentPage = parseInt($('.page.active').text());
    if (currentPage > 1) {
      loadPage(currentPage - 1);
    }
  });

  $('.next').click(function(e) {
    e.preventDefault();
    var currentPage = parseInt($('.page.active').text());
    var totalPages = $('.page').length - 2; // 减去上一页和下一页
    if (currentPage < totalPages) {
      loadPage(currentPage + 1);
    }
  });

  function loadPage(pageNum) {
    // 移除所有 active 类
    $('.page').removeClass('active');
    // 为当前页码添加 active 类
    $('.page').eq(pageNum - 1).addClass('active');
    // 这里可以添加 AJAX 请求或内容切换逻辑
    $('.content').text('当前是第 ' + pageNum + ' 页内容');
  }

  // 初始化第一页
  loadPage(1);
});

AJAX 分页实现

对于动态加载数据的分页，可以使用 AJAX：

function loadPage(pageNum) {
  $.ajax({
    url: 'api/data',
    data: { page: pageNum },
    success: function(data) {
      $('.content').html(data);
      $('.page').removeClass('active');
      $('.page').eq(pageNum - 1).addClass('active');
    }
  });
}

动态生成分页按钮

根据总页数动态生成分页按钮：

function generatePagination(totalPages) {
  var paginationHtml = '<a href="#" class="prev">上一页</a>';
  for (var i = 1; i <= totalPages; i++) {
    paginationHtml += '<a href="#" class="page">' + i + '</a>';
  }
  paginationHtml += '<a href="#" class="next">下一页</a>';
  $('.pagination').html(paginationHtml);
}

样式优化

为分页添加基本 CSS 样式：

.pagination a {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #ddd;
  text-decoration: none;
}
.pagination a.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

以上方法提供了 jQuery 实现分页的基本思路，可以根据实际需求进行调整和扩展。

jquery实现分页