实现持续刷新表格数据过滤状态的策略与实践

<input
  type="text"
  id="myInput"
  name="search"
  onkeyup="myFunction()"
  placeholder="Search for names.."
/>

function loadNewData() {
  $.ajax({
    url: "/webguivalue",
    type: "POST",
    dataType: "json",
    success: function (data) {
      $(refresh).replaceWith(data); // 替换表格内容
    },
  });
}

function loadNewData() {
  $.ajax({
    url: "/webguivalue",
    type: "POST",
    dataType: "json",
    success: function (data) {
      // 1. 使用新数据替换旧的表格内容
      $(refresh).replaceWith(data);
      // 2. 重新调用过滤函数，将已有的过滤条件应用到新数据上
      myFunction();
    },
  });
}

<div class="card-body">
  <div>
    <div class="h5 mb-0 font-weight-bold text-gray-800">
      <table class="table table-striped table-bordered table-hover">
        <!-- 过滤输入框 -->
        <input
          type="text"
          id="myInput"
          name="search"
          onkeyup="myFunction()"
          placeholder="Search for names.."
        />
        <tr class="odd gradeX">
          <td>
            <!-- 待刷新的表格，ID为refresh -->
            <table
              class="table table-striped table-bordered table-hover"
              id="refresh"
            >
              <!-- 初始数据或占位符 -->
            </table>
          </td>
          <td>
            <table
              class="table table-striped table-bordered table-hover table-responsive"
              id="inputs"
            >
              <!-- 其他表格，不受本次刷新影响 -->
            </table>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

<script src="/static/javascripts/searchBlocks.js"></script>
<script>
  // 假设 myFunction() 函数定义在 searchBlocks.js 或此处
  // 示例 myFunction (需要根据实际过滤逻辑实现)
  function myFunction() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    // 确保这里选择的是你希望过滤的表格，即 ID 为 'refresh' 的表格
    table = document.getElementById("refresh");
    if (!table) return; // 防止表格未加载导致错误
    tr = table.getElementsByTagName("tr");

    for (i = 0; i < tr.length; i++) {
      // 假设你要过滤的是表格的第一个td（或其他特定列）
      td = tr[i].getElementsByTagName("td")[0];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }

  $(document).ready(function () {
    // 定时刷新数据
    const refreshData = window.setInterval(function () {
      loadNewData();
    }, 1000); // 每1秒刷新一次数据

    // 其他定时任务 (如果存在)
    const buttonsAndIntervals = setInterval(function () {
      reload(); // 假设 reload() 是另一个函数
    }, 5000);

    // 加载新数据函数
    function loadNewData() {
      $.ajax({
        url: "/webguivalue",
        type: "POST",
        dataType: "json",
        success: function (data) {
          // 替换表格内容
          $("#refresh").replaceWith(data); // 使用jQuery选择器更安全
          // 重新应用过滤
          myFunction();
        },
        error: function (jqXHR, textStatus, errorThrown) {
          console.error("Error loading data:", textStatus, errorThrown);
          // 处理错误，例如显示错误消息
        }
      });
    }

    // 页面加载后立即执行一次数据加载和过滤
    loadNewData();
  });
</script>