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="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();
    // 获取当前页并减1
  });

  $('.next').click(function(e){
    e.preventDefault();
    // 获取当前页并加1
  });

  function loadPage(num){
    $.ajax({
      url: 'your_api_url',
      data: {page: num},
      success: function(data){
        $('.content').html(data);
      }
    });
  }
});

动态分页实现

当页数较多时，可以动态生成分页控件：

function generatePagination(totalPages, currentPage){
  var pagination = $('.pagination');
  pagination.empty();

  // 添加上一页按钮
  pagination.append('<a href="#" class="prev">上一页</a>');

  // 添加页码
  for(var i=1; i<=totalPages; i++){
    var active = i==currentPage ? 'active' : '';
    pagination.append('<a href="#" class="page '+active+'">'+i+'</a>');
  }

  // 添加下一页按钮
  pagination.append('<a href="#" class="next">下一页</a>');
}

无限滚动分页

另一种现代分页方式是无限滚动：

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

var currentPage = 1;
function loadNextPage(){
  currentPage++;
  $.get('your_api_url?page='+currentPage, function(data){
    $('.content').append(data);
  });
}

注意事项

• 分页请求通常需要后端API支持
• 对于大量数据应考虑延迟加载
• 移动端可能需要不同的分页样式
• 当前页应高亮显示
• 首页和末页应禁用相应按钮

以上代码可根据实际需求进行调整，核心思路是通过jQuery处理点击事件或滚动事件，然后通过AJAX获取分页数据并更新页面内容。