当前位置：首页 > jquery

jquery实现分页功能

2026-02-04 08:04:28jquery

使用jQuery实现分页功能

分页功能通常用于处理大量数据的分段显示，提升用户体验。以下是基于jQuery的分页实现方法：

基础HTML结构

创建一个简单的HTML结构，包含数据容器和分页控件：

<div id="data-container"></div>
<div id="pagination-controls">
  <button class="prev">上一页</button>
  <span class="page-numbers"></span>
  <button class="next">下一页</button>
</div>

数据加载与分页逻辑

初始化分页参数并加载数据：

$(document).ready(function() {
  var currentPage = 1;
  var itemsPerPage = 5;
  var totalItems = 0;
  var totalPages = 0;

  function loadData(page) {
    $.ajax({
      url: 'your-api-endpoint',
      data: { page: page, limit: itemsPerPage },
      success: function(response) {
        totalItems = response.total;
        totalPages = Math.ceil(totalItems / itemsPerPage);
        renderData(response.data);
        updatePaginationControls();
      }
    });
  }

  function renderData(data) {
    var container = $('#data-container');
    container.empty();
    $.each(data, function(index, item) {
      container.append('<div>' + item.name + '</div>');
    });
  }
});

分页控件更新

动态生成页码并处理翻页事件：

function updatePaginationControls() {
  var controls = $('#pagination-controls');
  var pageNumbers = controls.find('.page-numbers');
  pageNumbers.empty();

  for (var i = 1; i <= totalPages; i++) {
    pageNumbers.append('<span class="page' + (i === currentPage ? ' active' : '') + '">' + i + '</span> ');
  }

  controls.find('.prev').toggle(currentPage > 1);
  controls.find('.next').toggle(currentPage < totalPages);
}

$('#pagination-controls').on('click', '.prev', function() {
  if (currentPage > 1) {
    currentPage--;
    loadData(currentPage);
  }
});

$('#pagination-controls').on('click', '.next', function() {
  if (currentPage < totalPages) {
    currentPage++;
    loadData(currentPage);
  }
});

$('#pagination-controls').on('click', '.page', function() {
  currentPage = parseInt($(this).text());
  loadData(currentPage);
});

客户端分页实现

如果数据已全部加载到客户端，可以使用以下方法实现分页：

function paginateClientSide(data, page) {
  var start = (page - 1) * itemsPerPage;
  var end = start + itemsPerPage;
  return data.slice(start, end);
}

样式优化

为分页控件添加基本样式：

#pagination-controls {
  margin-top: 20px;
  text-align: center;
}

#pagination-controls button, #pagination-controls .page {
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
}

#pagination-controls .active {
  font-weight: bold;
  color: #fff;
  background: #007bff;
}