如何在AJAX获取的员工列表中实现JavaScript/jQuery分页？

核心逻辑梳理 #

• 维护两个关键数据变量：
  • originalEmployees：AJAX获取的原始员工全量数据
  • filteredEmployees：经过字母筛选、全局搜索、部门筛选、排序后的最终数据集，分页完全依赖这个数组

具体实现步骤 #

1. 初始化变量与AJAX获取数据 #

let originalEmployees = [];
let filteredEmployees = [];
const itemsPerPage = 10; // 自定义每页显示条数

// AJAX获取原始数据
fetch('/api/employees')
  .then(res => res.json())
  .then(data => {
    originalEmployees = data;
    filteredEmployees = [...originalEmployees]; // 初始状态未筛选，与原始数据一致
    initPagination(); // 初始化分页组件
    renderEmployees(filteredEmployees.slice(0, itemsPerPage)); // 渲染第一页数据
  });

2. 实现筛选与排序逻辑 #

所有筛选、排序操作完成后，必须更新filteredEmployees，再重新初始化分页组件并渲染第一页：

// 全局搜索函数
function handleSearch(query) {
  // 从原始数据开始过滤，避免多条件叠加时的逻辑混乱
  filteredEmployees = originalEmployees.filter(emp => 
    emp.name.toLowerCase().includes(query.toLowerCase()) ||
    emp.email.toLowerCase().includes(query.toLowerCase())
  );
  // 叠加其他筛选条件
  applyDepartmentFilter($('#department-select').val());
  applyLetterFilter($('.letter-filter.active').data('letter'));
  applySort($('#sort-select').val(), $('#order-select').val());
  // 更新分页与列表
  initPagination();
  renderEmployees(filteredEmployees.slice(0, itemsPerPage));
}

// 部门筛选函数
function applyDepartmentFilter(selectedDept) {
  if (selectedDept !== 'all') {
    filteredEmployees = filteredEmployees.filter(emp => emp.department === selectedDept);
  }
}

// 字母筛选函数
function applyLetterFilter(selectedLetter) {
  if (selectedLetter && selectedLetter !== 'all') {
    filteredEmployees = filteredEmployees.filter(emp => 
      emp.name.charAt(0).toUpperCase() === selectedLetter.toUpperCase()
    );
  }
}

// 排序函数
function applySort(sortKey = 'name', order = 'asc') {
  filteredEmployees.sort((a, b) => {
    return order === 'asc' 
      ? a[sortKey].localeCompare(b[sortKey])
      : b[sortKey].localeCompare(a[sortKey]);
  });
}

3. 初始化twbsPagination组件 #

基于filteredEmployees的长度计算总页数，分页切换时截取对应数据片段渲染：

function initPagination() {
  const totalPages = Math.ceil(filteredEmployees.length / itemsPerPage);
  
  // 先销毁已存在的分页实例，避免重复创建导致的异常
  $('#pagination').twbsPagination('destroy');
  
  $('#pagination').twbsPagination({
    totalPages: totalPages,
    visiblePages: 5,
    first: '首页',
    last: '末页',
    prev: '上一页',
    next: '下一页',
    onPageClick: function (event, page) {
      // 计算当前页的起始/结束索引
      const startIndex = (page - 1) * itemsPerPage;
      const endIndex = startIndex + itemsPerPage;
      // 截取对应数据并渲染
      renderEmployees(filteredEmployees.slice(startIndex, endIndex));
    }
  });
}

4. 员工列表渲染函数 #

负责将传入的员工数组片段渲染到页面：

function renderEmployees(employees) {
  const employeeList = $('#employee-list');
  employeeList.empty();
  
  if (employees.length === 0) {
    employeeList.html('<li class="list-group-item text-center">暂无匹配的员工数据</li>');
    return;
  }
  
  employees.forEach(emp => {
    const listItem = `
      <li class="list-group-item">
        <div class="d-flex justify-content-between align-items-start">
          <div>
            <h5 class="mb-1">${emp.name}</h5>
            <p class="mb-1">部门：${emp.department}</p>
          </div>
          <span class="text-muted">${emp.email}</span>
        </div>
      </li>
    `;
    employeeList.append(listItem);
  });
}

5. 绑定用户操作事件 #

将所有筛选、排序操作与处理函数绑定：

// 搜索框输入事件
$('#search-input').on('input', function() {
  handleSearch($(this).val());
});

// 部门筛选下拉事件
$('#department-select').on('change', function() {
  handleSearch($('#search-input').val());
});

// 字母筛选点击事件
$('.letter-filter').on('click', function() {
  $('.letter-filter').removeClass('active');
  $(this).addClass('active');
  handleSearch($('#search-input').val());
});

// 排序选项变更事件
$('#sort-select, #order-select').on('change', function() {
  handleSearch($('#search-input').val());
});

关键注意事项 #

• 每次筛选/排序操作，都要从原始数据originalEmployees重新开始过滤，避免多条件叠加时的逻辑混乱
• 分页组件的总页数必须基于filteredEmployees的长度计算，确保分页与当前筛选结果匹配
• 切换分页时，始终从filteredEmployees中截取数据，而非原始数据

内容的提问来源于stack exchange，提问作者Akash Nair