Ajax加载表格分页后CSS active样式无法生效问题

咱们先捋清楚问题根源：你的分页导航是通过Ajax动态生成的——每次请求新页面时，#totalResultsUL里的内容会被重新渲染替换，原来的DOM元素被覆盖后，要么active类没同步更新到新的页码上，要么点击事件绑定失效导致样式无法切换。下面给你几个实用的解决办法：

1. 在Ajax成功回调里主动设置Active类 #

当接口返回分页数据后，渲染分页按钮的同时，根据当前页码给对应按钮加上active类，这是最直接的方式：

$.ajax({
  type: "GET",
  url: "你的接口地址",
  dataType: 'json',
  success: function(response) {
    // 先处理表格数据渲染...
    
    // 开始渲染分页导航
    let paginationHTML = '';
    const currentPage = response.currentPage; // 假设接口返回当前页码
    const totalPages = response.totalPages; // 假设接口返回总页数
    
    for (let i = 1; i <= totalPages; i++) {
      // 判断当前页，给匹配的li添加active类
      const activeClass = i === currentPage ? 'active' : '';
      paginationHTML += `<li class="page-item ${activeClass}"><a class="page-link" href="#" data-page="${i}">${i}</a></li>`;
    }
    
    // 把生成的分页HTML插入容器
    $('#totalResultsUL').html(paginationHTML);
  }
});

核心就是借助接口返回的当前页码，在渲染每个分页按钮时精准添加active类，这样每次新分页加载出来，当前页就自带选中样式了。

2. 用事件委托绑定分页点击事件 #

如果你的分页点击事件是直接绑定在静态元素上的，动态生成的按钮会完全没反应，更别说切换active样式了。这时候要用事件委托，把事件绑定在父容器上：

// 把点击事件绑定到父容器，确保动态生成的按钮也能触发
$('#UsersTableNavigation').on('click', '.page-link', function(e) {
  e.preventDefault();
  
  // 先清除所有分页按钮的active类
  $('#totalResultsUL .page-item').removeClass('active');
  
  // 给当前点击的按钮的父元素（li）加上active类
  $(this).closest('.page-item').addClass('active');
  
  // 发起Ajax请求获取对应页码的数据
  const targetPage = $(this).data('page');
  // 这里调用你的Ajax请求逻辑，传入targetPage参数即可
});

不管分页按钮是首次加载还是Ajax动态生成的，这个绑定方式都能生效，点击后也会立刻切换active样式。

3. 检查CSS样式优先级 #

有时候不是JS的问题，是CSS样式被覆盖了。比如你写的active类样式优先级不够，被其他样式压制了，可以调整一下：

/* 确保active样式的优先级足够，比如： */
.pagination .page-item.active .page-link {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}

如果有其他针对.page-link的样式优先级更高，可以给active样式增加权重，或者调整样式的编写顺序。

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