在持续刷新表格中维护数据过滤状态的策略

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

$(document).ready(function () {
  const refreshData = window.setInterval(function () {
    loadNewData();
  }, 1000);

  // 假设这里是其他定时器或初始化代码
  // const buttonsAndIntervals = setInterval(function () {
  //   reload();
  // }, 5000);

  function loadNewData() {
    $.ajax({
      url: "/webguivalue",
      type: "POST",
      dataType: "json",
      success: function (data) {
        // 1. 用新数据替换整个表格
        $(refresh).replaceWith(data);
        // 2. 替换完成后，立即重新应用过滤函数
        myFunction();
      },
    });
  }

  // 假设myFunction()的实现大致如下，用于根据输入框内容过滤表格行
  // 请确保此函数在全局作用域或可通过其他方式访问
  // function myFunction() {
  //   var input, filter, table, tr, td, i, txtValue;
  //   input = document.getElementById("myInput");
  //   filter = input.value.toUpperCase();
  //   table = document.getElementById("refresh"); // 假设refresh是包含数据的表格ID
  //   tr = table.getElementsByTagName("tr");
  //   for (i = 0; i < tr.length; i++) {
  //     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";
  //       }
  //     }
  //   }
  // }
});

<div class="card-body">
  <input
    type="text"
    id="myInput"
    name="search"
    onkeyup="myFunction()"
    placeholder="Search for names.."
  />
  <table
    class="table table-striped table-bordered table-hover"
    id="refresh"
  >
    <!-- 初始数据或空表格，将被AJAX内容替换 -->
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>30</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>24</td>
        <td>London</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/static/javascripts/searchBlocks.js"></script>
<script>
  // 假设 searchBlocks.js 中定义了 myFunction
  // 如果没有，可以像下面这样定义
  function myFunction() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("refresh");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      // 假设过滤第一列 (Name)
      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 () {
    // 模拟 AJAX 数据刷新
    const refreshData = window.setInterval(function () {
      loadNewData();
    }, 3000); // 每3秒刷新一次

    function loadNewData() {
      // 实际应用中，这里会通过 AJAX 请求获取新的 HTML 片段或 JSON 数据
      // 假设从服务器获取到以下 HTML 片段
      const newTableContent = `
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>Charlie</td><td>28</td><td>Paris</td></tr>
          <tr><td>David</td><td>35</td><td>Berlin</td></tr>
          <tr><td>Alice</td><td>31</td><td>New York</td></tr>
          <tr><td>Eve</td><td>22</td><td>Rome</td></tr>
        </tbody>
      `;

      // 替换整个表格内容
      $("#refresh").html(newTableContent); // 使用 .html() 替换内容而不是整个元素，如果服务器返回的是 tbody 内容，或者需要保留 #refresh 元素本身
      // 如果服务器返回的是完整的 <table id="refresh">...</table> 结构，则使用 replaceWith
      // $("#refresh").replaceWith('<table class="table table-striped table-bordered table-hover" id="refresh">' + newTableContent + '</table>');

      // 重新应用过滤
      myFunction();
    }
  });
</script>