当前位置：首页 > jquery

jquery翻页

2026-03-02 19:28:30jquery

jQuery实现翻页功能的方法

使用jQuery实现翻页功能可以通过多种方式完成，以下列举几种常见方法：

动态加载内容

通过AJAX请求获取分页数据，动态更新页面内容：

$(document).ready(function() {
  $('.pagination a').click(function(e) {
    e.preventDefault();
    var page = $(this).attr('data-page');

    $.ajax({
      url: 'your_api_url?page=' + page,
      type: 'GET',
      success: function(data) {
        $('#content-container').html(data);
      }
    });
  });
});

滑动翻页效果

为翻页添加平滑的滑动动画：

$('.next-page').click(function() {
  $('html, body').animate({
    scrollTop: $('#next-section').offset().top
  }, 800);
});

简单分页器实现

创建一个基础分页控件：

function createPagination(totalPages, currentPage) {
  var pagination = $('<div class="pagination"></div>');

  for (var i = 1; i <= totalPages; i++) {
    var pageLink = $('<a href="#"></a>').text(i);
    if (i === currentPage) {
      pageLink.addClass('active');
    }
    pageLink.click(function() {
      // 处理页码点击事件
    });
    pagination.append(pageLink);
  }

  $('#pagination-container').html(pagination);
}

无限滚动

监听滚动事件实现无限加载：

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
    // 加载更多内容
    loadMoreItems();
  }
});

function loadMoreItems() {
  // AJAX请求获取更多数据
}