当前位置：首页 > jquery

jquery 翻页

2026-03-02 19:26:53jquery

使用 jQuery 实现翻页功能

翻页功能通常用于分页显示数据，提升用户体验。以下是几种常见的实现方式：

基础翻页实现

通过 AJAX 加载分页数据，动态更新页面内容：

$(document).ready(function() {
  var currentPage = 1;

  // 加载页面数据
  function loadPage(page) {
    $.ajax({
      url: 'your_api_url',
      data: { page: page },
      success: function(data) {
        $('#content').html(data);
        currentPage = page;
        updatePagination();
      }
    });
  }

  // 更新分页按钮状态
  function updatePagination() {
    $('.page-btn').removeClass('active');
    $('.page-btn[data-page="' + currentPage + '"]').addClass('active');
  }

  // 点击分页按钮
  $(document).on('click', '.page-btn', function() {
    var page = $(this).data('page');
    loadPage(page);
  });

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

无限滚动翻页

当用户滚动到页面底部时自动加载下一页：

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
    loadNextPage();
  }
});

var isLoading = false;
var currentPage = 1;

function loadNextPage() {
  if (isLoading) return;

  isLoading = true;
  $('#loading').show();

  $.ajax({
    url: 'your_api_url',
    data: { page: currentPage + 1 },
    success: function(data) {
      if (data) {
        $('#content').append(data);
        currentPage++;
      }
      isLoading = false;
      $('#loading').hide();
    }
  });
}

分页组件示例

HTML 结构：

<div id="content"></div>
<div class="pagination">
  <button class="page-btn" data-page="1">1</button>
  <button class="page-btn" data-page="2">2</button>
  <button class="page-btn" data-page="3">3</button>
  <!-- 更多分页按钮 -->
</div>
<div id="loading" style="display:none;">加载中...</div>

CSS 样式：

.pagination {
  margin: 20px 0;
  text-align: center;
}

.page-btn {
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
}

.page-btn.active {
  background-color: #007bff;
  color: white;
}