jquery翻页

jQuery 实现翻页功能

翻页功能通常用于分页展示数据，以下是几种常见的实现方式：

基础分页实现

使用 jQuery 配合简单的 HTML 结构可以快速实现翻页功能。HTML 部分需要包含分页容器和内容容器：

<div id="content">
  <!-- 内容将在这里动态加载 -->
</div>

<div class="pagination">
  <a href="#" class="prev">上一页</a>
  <span class="page-numbers"></span>
  <a href="#" class="next">下一页</a>
</div>

对应的 jQuery 代码：

$(document).ready(function() {
  var currentPage = 1;
  var totalPages = 5; // 根据实际数据设置总页数

  function loadPage(page) {
    // 这里应该是 AJAX 请求或本地数据加载
    $('#content').html('正在加载第 ' + page + ' 页内容...');

    // 更新分页状态
    updatePagination(page);
  }

  function updatePagination(page) {
    $('.page-numbers').text(page + ' / ' + totalPages);
    $('.prev').toggle(page > 1);
    $('.next').toggle(page < totalPages);
  }

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

  // 上一页点击事件
  $('.prev').click(function(e) {
    e.preventDefault();
    if(currentPage > 1) {
      currentPage--;
      loadPage(currentPage);
    }
  });

  // 下一页点击事件
  $('.next').click(function(e) {
    e.preventDefault();
    if(currentPage < totalPages) {
      currentPage++;
      loadPage(currentPage);
    }
  });
});

AJAX 分页实现

对于从服务器动态加载数据的情况，可以使用 AJAX：

function loadPage(page) {
  $.ajax({
    url: 'your-api-endpoint',
    data: { page: page },
    type: 'GET',
    success: function(response) {
      $('#content').html(response.data);
      totalPages = response.totalPages;
      updatePagination(page);
    },
    error: function() {
      $('#content').html('加载失败');
    }
  });
}

数字分页实现

如果需要显示页码数字而非简单的上一页/下一页：

<div class="pagination">
  <a href="#" class="prev">&laquo;</a>
  <div class="page-links"></div>
  <a href="#" class="next">&raquo;</a>
</div>

对应的 jQuery 代码：

function updatePagination(page) {
  var $pageLinks = $('.page-links').empty();
  var visiblePages = 5; // 可见页码数

  // 计算起始和结束页码
  var start = Math.max(1, page - Math.floor(visiblePages/2));
  var end = Math.min(totalPages, start + visiblePages - 1);

  // 调整起始页码如果结束页码接近总页数
  start = Math.max(1, end - visiblePages + 1);

  // 添加页码链接
  for(var i = start; i <= end; i++) {
    $('<a>').attr('href', '#').text(i)
      .toggleClass('active', i === page)
      .click(function(e) {
        e.preventDefault();
        currentPage = parseInt($(this).text());
        loadPage(currentPage);
      }).appendTo($pageLinks);
  }

  $('.prev').toggle(page > 1);
  $('.next').toggle(page < totalPages);
}

无限滚动实现

另一种流行的翻页方式是无限滚动，当用户滚动到页面底部时自动加载下一页：

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
    if(currentPage < totalPages && !isLoading) {
      currentPage++;
      loadPage(currentPage);
    }
  }
});

使用分页插件

对于更复杂的需求，可以考虑使用现有的 jQuery 分页插件：

1. jQuery Pagination：轻量级分页插件

   $('#pagination').pagination({
     items: 100,
     itemsOnPage: 10,
     onPageClick: function(pageNumber) {
       loadPage(pageNumber);
     }
   });

2. DataTables：功能强大的表格插件，内置分页功能

   $('#table').DataTable({
     paging: true,
     pageLength: 10
   });

这些方法可以根据具体需求选择或组合使用，实现从简单到复杂的不同翻页效果。