Bootstrap Table筛选后Number列求和未随结果更新的问题求助

云原生阿岚

2026-7-19

问题：Bootstrap Table筛选后求和结果不更新

我有一个后续会通过for循环动态生成的HTML表格，用Bootstrap Table的lookup filters（筛选控件）筛选后，Number列的求和结果始终固定，不会随筛选结果动态更新。相关代码如下：

原JavaScript代码

function searchTable() {
  var filter, found, table, tr, td, i, j;
  //input = document.getElementById("search");
  //input2 = document.getElementById("search2");
  filter = input.value.toUpperCase();
  table = document.getElementById("displaytable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    for (j = 0; j < td.length; j++) {
      if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
        found = true;
      }
    }
    if (found) {
      tr[i].style.display = "";
      found = false;
    } else {
      tr[i].style.display = "none";
    }
  }
  var cls = document.getElementById("displaytable").getElementsByTagName("td");
  var sum = 0;
  for (var i = 0; i < cls.length; i++) {
    if (cls[i].className == "countable" && cls[i].closest("tr").style.display != "none") {
      sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
    }
  }
  document.getElementById('total').innerHTML = sum;

}
var cls = document.getElementById("displaytable").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++) {
  if (cls[i].className == "countable") {
    sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
  }
}
document.getElementById('total').innerHTML += sum;

原HTML代码

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">
  <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
</head>
<table class="table responsive table table-striped" data-toggle="table" data-filter-control="true" data-show-jump-to="true" data-pagination="true" data-show-columns="true">
  <thead>
    <tr>
      <th scope="col" data-field="name" data-filter-control="input">Name</th>
      <th scope="col" data-field="surname" data-filter-control="input">Surname</th>
      <th scope="col" data-field="number" data-filter-control="input">Number</th>
    </tr>
  </thead>
  <tbody id="displaytable">
    <tr>
      <td>John</td>
      <td>Tidor</td>
      <td class="countable">5</td>
    </tr>
    <tr>
      <td>Marc</td>
      <td>Tidor</td>
      <td class="countable">5</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>Cruise</td>
      <td class="countable">4</td>
    </tr>
    <tr>
      <td>Jordan</td>
      <td>Michael</td>
      <td class="countable">7</td>
    </tr>
    <tr>
      <td>Marc</td>
      <td>Michael</td>
      <td class="countable">3</td>
    </tr>
    <tr>
      <td>Marc</td>
      <td>Michael</td>
      <td class="countable">1</td>
    </tr>
  </tbody>
</table>

<table>
  <tfoot class="shown">
    <tr>
      <td colspan="5">Total:</td>
      <td id="total"></td>
    </tr>
  </tfoot>
</table>

问题原因

自定义的searchTable函数从未被触发：当前使用的是Bootstrap Table自带的filter-control筛选，不是自定义的搜索框，所以该函数不会执行。
初始求和逻辑错误：页面加载时直接计算所有行的总和并追加到total元素，后续没有重新计算的触发点。
行可见性判断无效：Bootstrap Table的筛选不会通过修改style.display来隐藏行，而是使用自身的DOM类和逻辑，所以cls[i].closest("tr").style.display != "none"这个判断无法识别筛选后的隐藏行。

解决方案

利用Bootstrap Table提供的filter.bs.table事件，每次筛选完成后自动触发求和计算，同时修正行可见性的判断逻辑：

修改后的JavaScript代码

// 定义求和函数
function calculateTotal() {
  let sum = 0;
  // 只筛选Bootstrap Table中可见的行
  $('#displaytable tr:visible').each(function() {
    const countableTd = $(this).find('.countable');
    if (countableTd.length) {
      const value = parseInt(countableTd.text());
      sum += isNaN(value) ? 0 : value;
    }
  });
  $('#total').text(sum);
}

// 页面加载完成后计算初始总和，同时绑定筛选事件
$(function() {
  calculateTotal();
  // 监听Bootstrap Table的筛选完成事件
  $('table').on('filter.bs.table', function() {
    calculateTotal();
  });
});

修改后的HTML代码

移除无用的searchTable相关注释和代码，保留必要结构：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">
  <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
</head>
<table class="table responsive table-striped" data-toggle="table" data-filter-control="true" data-show-jump-to="true" data-pagination="true" data-show-columns="true">
  <thead>
    <tr>
      <th data-field="name" data-filter-control="input">Name</th>
      <th data-field="surname" data-filter-control="input">Surname</th>
      <th data-field="number" data-filter-control="input">Number</th>
    </tr>
  </thead>
  <tbody id="displaytable">
    <!-- 动态生成的行将插入这里 -->
    <tr>
      <td>John</td>
      <td>Tidor</td>
      <td class="countable">5</td>
    </tr>
    <tr>
      <td>Marc</td>
      <td>Tidor</td>
      <td class="countable">5</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>Cruise</td>
      <td class="countable">4</td>
    </tr>
    <tr>
      <td>Jordan</td>
      <td>Michael</td>
      <td class="countable">7</td>
    </tr>
    <tr>
      <td>Marc</td>
      <td>Michael</td>
      <td class="countable">3</td>
    </tr>
    <tr>
      <td>Marc</td>
      <td>Michael</td>
      <td class="countable">1</td>
    </tr>
  </tbody>
</table>

<table>
  <tfoot class="shown">
    <tr>
      <td colspan="2">Total:</td>
      <td id="total"></td>
    </tr>
  </tfoot>
</table>

关键说明

使用filter.bs.table事件：Bootstrap Table在每次筛选完成后会触发该事件，确保求和逻辑实时执行。
可见行判断：用jQuery的:visible选择器直接获取Bootstrap Table中显示的行，无需手动判断行的样式。
动态行兼容：如果后续通过for循环动态生成表格行，只需确保新行的Number列带有countable类，calculateTotal函数会自动包含这些行的计算。

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

Bootstrap Table筛选后Number列求和未随结果更新的问题求助

原JavaScript代码 #

原HTML代码 #

问题原因 #

解决方案 #

修改后的JavaScript代码 #

修改后的HTML代码 #

关键说明 #