如何在jQuery中刷新表格至初始状态以进行新搜索？

问题分析 #

你的核心问题是没有保留表格的原始数据副本：第一次搜索后，DOM里的表格行已经被替换成搜索结果，后续搜索只能基于之前的结果过滤，完全没法回到原始数据集重新查找。再加上原代码直接移除行再添加结果的操作，导致原始数据丢失，自然无法重置状态。

修复方案 #

我们需要先把原始表格行完整保存下来，每次搜索前强制重置表格到初始状态，再基于原始数据执行新的搜索逻辑。以下是修改后的完整代码：

HTML代码（保持不变）

<div class="inventory" ><span class="hdr">inventory-1</span> <input type="text" placeholder="Search" class="searchrequest" id="s1"> </div> 
<div class="gcontain" id="g1" > 
  <ul class="tablist"> 
    <li><a href="#g11">tab1</a></li> 
  </ul> 
  <div class="tab_container"> 
    <div id="g11" class="tab"> 
      <table class="data" id="data"> 
        <thead> 
          <tr id="head"><th>SL.No</th><th>Column2</th><th>Column3</th><th>Column4</th><th>Column5</th> </tr> 
        </thead> 
        <tbody id="tabledata" class="tabledata"> 
          <tr> <td>1</td><td>Row 1</td><td>Row 1</td><td>Row 1</td><td>Row 1</td></tr> 
          <tr> <td>2</td><td>Row 2</td><td>Row 2</td><td>Row 2</td><td>Row 2</td></tr> 
          <tr> <td>3</td><td>Row 3</td><td>Row 3</td><td>Row 3</td><td>Row 3</td></tr> 
          <tr> <td>4</td><td>Row 4</td><td>Row 4</td><td>Row 4</td><td>Row 4</td></tr> 
          <tr> <td>1</td><td>Row 1</td><td>Row 1</td><td>Row 1</td><td>Row 1</td></tr> 
          <tr> <td>2</td><td>Row 2</td><td>Row 2</td><td>Row 2</td><td>Row 2</td></tr> 
          <tr> <td>3</td><td>Row 3</td><td>Row 3</td><td>Row 3</td><td>Row 3</td></tr> 
          <tr> <td>4</td><td>Row 4</td><td>Row 4</td><td>Row 4</td><td>Row 4</td></tr> 
          <tr> <td>1</td><td>Row 1</td><td>Row 1</td><td>Row 1</td><td>Row 1</td></tr> 
          <tr> <td>2</td><td>Row 2</td><td>Row 2</td><td>Row 2</td><td>Row 2</td></tr> 
          <tr> <td>3</td><td>Row 3</td><td>Row 3</td><td>Row 3</td><td>Row 3</td></tr> 
        </tbody> 
        <tfoot id="footer" class="footer"> 
          <tr> 
            <td colspan="5"><span id="totentry">Total Entry :</span><span id="total" class="total"> </span><span id="nav" class="nav"></span></td> 
          </tr> 
        </tfoot> 
      </table> 
    </div>
  </div>
</div>

修改后的jQuery代码

// 页面加载时立刻保存原始表格行的副本，这是解决问题的核心！
var originalRows = $('#tabledata tr').clone();
var rowsPerPage = 5;

$(".searchrequest").on("keyup", function() {
    // 缓存常用DOM元素，减少重复查询提升性能
    var $tableWrapper = $(this).closest('.inventory').next('.gcontain').find('.tab_container .tab');
    var $tbody = $tableWrapper.find('.tabledata');
    var $totalCount = $tableWrapper.find('.footer .total');
    var $paginationNav = $tableWrapper.find('.footer .nav');
    
    // 1. 强制重置表格状态：清空tbody，重新插入原始行的副本
    $tbody.empty().append(originalRows.clone());
    $totalCount.hide();
    $paginationNav.empty();

    var searchKeyword = $(this).val().toLowerCase();
    var $allRows = $tbody.find('tr');
    var matchCount = 0;

    // 2. 过滤出匹配搜索关键词的行
    var $matchedRows = $allRows.filter(function() {
        var rowContent = $(this).text().toLowerCase();
        var isMatch = rowContent.indexOf(searchKeyword) !== -1;
        if (isMatch) matchCount++;
        return isMatch;
    });

    // 3. 更新搜索结果统计
    $totalCount.html(matchCount).show();

    // 4. 处理分页逻辑
    var totalPages = Math.ceil(matchCount / rowsPerPage);
    // 先隐藏所有匹配行，再显示第一页的内容
    $matchedRows.hide().slice(0, rowsPerPage).show();

    // 生成分页按钮（只有结果超过一页时才显示）
    if (totalPages > 1) {
        for (var i = 0; i < totalPages; i++) {
            var pageNumber = i + 1;
            $paginationNav.append('<a href="#" class="pagination" rel="' + i + '">' + pageNumber + '</a> ');
        }
    }

    // 分页点击事件：用事件委托避免重复绑定，防止多次点击触发多个回调
    $paginationNav.off('click', 'a').on('click', 'a', function(e) {
        e.preventDefault();
        var currentPage = $(this).attr('rel');
        var startIndex = currentPage * rowsPerPage;
        var endIndex = startIndex + rowsPerPage;
        $matchedRows.hide().slice(startIndex, endIndex).css('display', 'table-row').animate({opacity:1}, 300);
    });
});

关键改进点 #

• 保留原始数据：页面加载时用clone()完整保存所有原始行，确保每次搜索都基于最开始的完整数据集。
• 强制重置状态：每次触发搜索时，先清空tbody并重新插入原始行副本，彻底清除之前的搜索痕迹。
• 优化事件绑定：使用off()+on()的事件委托方式，避免重复绑定分页点击事件，防止出现多次触发的问题。
• 简化DOM操作：缓存常用DOM元素，减少重复查询，提升代码运行效率。

这样修改后，无论你清空搜索框还是输入新关键词，表格都会先回到初始状态，再重新执行搜索，就能得到正确的结果了。

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