如何在持续刷新的表格中实现数据过滤？

问题根源 #

你当前的代码每次刷新时用$(refresh).replaceWith(data)直接替换了整个#refresh表格，导致之前通过myFunction()设置的过滤状态（比如行的显示/隐藏）被完全重置，同时注意原代码里的$(refresh)是错误选择器，应该改为$('#refresh')才能正确选中目标表格。

解决方案 #

以下是几种可行的处理方式：

方案1：前端保存过滤状态，刷新后重新应用

每次刷新前先记录当前的过滤关键词，更新表格后重新执行过滤逻辑，保留用户的过滤输入：

修改loadNewData函数：

function loadNewData() {
  // 保存当前输入框的过滤关键词
  const filterKeyword = $('#myInput').val().toLowerCase();
  
  $.ajax({
    url: "/webguivalue",
    type: "POST",
    dataType: "json",
    success: function (data) {
      // 修正选择器，正确选中目标表格
      $('#refresh').replaceWith(data);
      
      // 重新设置输入框值并触发过滤
      $('#myInput').val(filterKeyword);
      myFunction();
    },
  });
}

确保你的myFunction()逻辑是基于当前输入框值，对#refresh表格的行进行过滤，示例逻辑：

function myFunction() {
  const input = $('#myInput').val().toLowerCase();
  $('#refresh tr').filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(input) > -1);
  });
}

方案2：后端接口支持过滤（推荐）

把前端的过滤关键词传给后端，让后端直接返回符合条件的数据，这样前端刷新后直接展示过滤后的内容，避免前端重复过滤：

修改loadNewData函数，携带过滤参数：

function loadNewData() {
  const filterKeyword = $('#myInput').val();
  
  $.ajax({
    url: "/webguivalue",
    type: "POST",
    dataType: "json",
    // 将过滤参数传给后端
    data: { search: filterKeyword },
    success: function (data) {
      $('#refresh').replaceWith(data);
    },
  });
}

此时需要你的后端接口/webguivalue接收search参数，根据参数过滤数据后再返回HTML或JSON。这种方式更高效，尤其当数据量较大时。

方案3：优化DOM更新方式

如果后端返回的是表格内的行内容，不要直接替换整个表格，而是只更新表格的内部内容，减少DOM替换带来的状态丢失：

success: function (data) {
  // 假设data是表格行的HTML代码，直接替换表格内容而非整个表格元素
  $('#refresh').html(data);
  // 重新执行过滤
  myFunction();
}

内容的提问来源于stack exchange，提问作者Selçuk Gök