动态删除表格行后分页链接与显示行更新问题求助

在HTML表格中实现了分页功能（每页显示3行），并添加按钮用于移除带有remove_tr类的行。但移除行后，分页链接和显示逻辑未正确更新：移除2行后剩余4行，本该显示2页，但旧的分页结构未被替换，导致显示异常。

解决方案 #

核心思路是在移除行后重新初始化分页逻辑，同时确保每次初始化前清除旧的分页元素，避免重复渲染。具体修改如下：

1. 重构分页函数，支持重复调用 #

修改add_pagination函数，先移除已存在的分页容器，再基于当前表格的最新行数据重新计算并生成分页：

$(document).ready(function() {
  add_pagination();
});

function add_pagination() {
  var rowsPerPage = 3;
  var $table = $('#data-table');
  var $tbody = $table.find('tbody');
  // 先移除旧的分页容器，避免重复创建
  $('.pagination').remove();
  // 重新获取当前所有行
  var $rows = $tbody.find('tr');
  var totalRows = $rows.length;
  var totalPages = Math.ceil(totalRows / rowsPerPage);
  var $pagination = $('<div class="pagination"></div>');
  $table.after($pagination);

  // 生成分页链接
  for (var i = 1; i <= totalPages; i++) {
    var $link = $('<a href="#"></a>').text(i);
    $link.attr('data-page', i);
    $pagination.append($link);
  }

  // 显示第一页内容
  $rows.hide();
  if(totalRows > 0) {
    $rows.slice(0, rowsPerPage).show();
    $pagination.find('a:first').addClass('active');
  }

  // 分页点击事件
  $pagination.on('click', 'a', function(e) {
    e.preventDefault();
    var page = $(this).attr('data-page');
    var startIndex = (page - 1) * rowsPerPage;
    var endIndex = startIndex + rowsPerPage;

    $rows.hide();
    $rows.slice(startIndex, endIndex).show();

    $pagination.find('a').removeClass('active');
    $(this).addClass('active');
  });
}

// 移除行后重新初始化分页
$(".remove7").on("click", function() {
  $(".remove_tr").remove();
  add_pagination();
})

2. 保留原有CSS样式 #

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination a {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #f2f2f2;
  color: #333;
  text-decoration: none;
  border-radius: 3px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

3. 原有HTML结构不变 #

<button class="remove7">remove</button>
<table id="data-table">
  <thead>
    <tr id="table-header">
      <th data-column="ALARM_DESC" data-order="asc">
        ALARM_DESC
        <div class="resize-handle"></div>
      </th>
      <th data-column="ALARM_NAME" data-order="asc">
        ALARM_NAME
        <div class="resize-handle"></div>
      </th>
      <th data-column="APPLICAITON" data-order="asc">
        APPLICAITON
        <div class="resize-handle"></div>
      </th>
      <th data-column="ALARM_PATH" data-order="asc">
        ALARM_PATH
        <div class="resize-handle"></div>
      </th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr class="high-priority remove_tr">
      <td class="ALARM_DESC">first desc</td>
      <td class="ALARM_NAME">first name</td>
      <td class="APPLICAITON">first app</td>
      <td class="ALARM_PATH">first path</td>
    </tr>
    <tr class="high-priority remove_tr">
      <td class="ALARM_DESC">Second desc</td>
      <td class="ALARM_NAME">Second name</td>
      <td class="APPLICAITON">second app</td>
      <td class="ALARM_PATH">second path</td>
    </tr>
    <tr class="high-priority ">
      <td class="ALARM_DESC">third desc</td>
      <td class="ALARM_NAME">third name</td>
      <td class="APPLICAITON">third app</td>
      <td class="ALARM_PATH">third path</td>
    </tr>
    <tr class="high-priority">
      <td class="ALARM_DESC">four desc</td>
      <td class="ALARM_NAME">four name</td>
      <td class="APPLICAITON">four app</td>
      <td class="ALARM_PATH">four path</td>
    </tr>
    <tr class="high-priority">
      <td class="ALARM_DESC">fifth desc</td>
      <td class="ALARM_NAME">fifth name</td>
      <td class="APPLICAITON">fifth app</td>
      <td class="ALARM_PATH">fifth path</td>
    </tr>
    <tr class="high-priority">
      <td class="ALARM_DESC">six desc</td>
      <td class="ALARM_NAME">six name</td>
      <td class="APPLICAITON">six app</td>
      <td class="ALARM_PATH">six path</td>
    </tr>
  </tbody>
</table>

关键修改点 #

• 在add_pagination开头添加$('.pagination').remove()，清除旧的分页容器
• 移除行后立即调用add_pagination()，重新计算分页并渲染
• 添加了空行判断，避免无数据时分页出现异常

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