bootstrap-table 汇总行/页脚不显示footerFormatter不执行问题

最新推荐文章于 2025-12-03 20:20:13 发布

原创最新推荐文章于 2025-12-03 20:20:13 发布 · 5.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #bootstrap-table

前端专栏收录该内容

1 篇文章

订阅专栏

在使用Bootstrap-table时遇到一个奇怪的问题，一个表格的页脚不显示，footerFormatter函数未执行。经过源码排查，发现在列不可见的情况下，方法会直接返回，导致页脚不生成。解决办法是避免使用隐藏列，以确保footer能正常工作。

同一个页面两个bootstrap-table表格，使用完全一样的options，其中一个却不显示页脚，footerFormatter 函数里面 debugger；发现根本不进去函数。

各种百度goole都找不到原因，无奈只能去看源码。终于在大概第2604行发现一段奇怪的代码：

{
        key: 'resetFooter',
        value: function resetFooter() {
          var data = this.getData();
          var html = [];

          if (!this.options.showFooter || this.options.cardView) {
            // do nothing
            return;
          }

          if (!this.options.cardView && this.options.detailView) {
            html.push('<td><div class="th-inner">&nbsp;</div><div class="fht-cell"></div></td>');
          }

          var _iteratorNormalCompletion16 = true;
          var _didIteratorError16 = false;
          var _iteratorError16 = undefined;

          try {
            for (var _iterator16 = this.columns[Symbol.iterator](), _step16; !(_iteratorNormalCompletion16 = (_step16 = _iterator16.next()).done); _iteratorNormalCompletion16 = true) {
              var column = _step16.value;

              var falign = '';

              var valign = '';
              var csses = [];
              var style = {};
              var class_ = Utils.sprintf(' class="%s"', column['class']);

              if (!column.visible) {
                return;
              }

              if (this.options.cardView && !column.cardVisible) {
                return;
              }

              falign = Utils.sprintf('text-align: %s; ', column.falign ? column.falign : column.align);
              valign = Utils.sprintf('vertical-align: %s; ', column.valign);
              style = Utils.calculateObjectValue(null, this.options.footerStyle);

              if (style && style.css) {
                var _iteratorNormalCompletion17 = true;
                var _didIteratorError17 = false;
                var _iteratorError17 = undefined;

                try {
                  for (var _iterator17 = Object.keys(style.css)[Symbol.iterator](), _step17; !(_iteratorNormalCompletion17 = (_step17 = _iterator17.next()).done); _iteratorNormalCompletion17 = true) {
                    var _ref21 = _step17.value;

                    var _ref22 = _slicedToArray(_ref21, 2);

                    var key = _ref22[0];
                    var value = _ref22[1];

                    csses.push(key + ': ' + value);
                  }
                } catch (err) {
                  _didIteratorError17 = true;
                  _iteratorError17 = err;
                } finally {
                  try {
                    if (!_iteratorNormalCompletion17 && _iterator17.return) {
                      _iterator17.return();
                    }
                  } finally {
                    if (_didIteratorError17) {
                      throw _iteratorError17;
                    }
                  }
                }
              }

              html.push('<td', class_, Utils.sprintf(' style="%s"', falign + valign + csses.concat().join('; ')), '>');
              html.push('<div class="th-inner">');

              html.push(Utils.calculateObjectValue(column, column.footerFormatter, [data], '&nbsp;') || '&nbsp;');

              html.push('</div>');
              html.push('<div class="fht-cell"></div>');
              html.push('</div>');
              html.push('</td>');
            }
          } catch (err) {
            _didIteratorError16 = true;
            _iteratorError16 = err;
          } finally {
            try {
              if (!_iteratorNormalCompletion16 && _iterator16.return) {
                _iterator16.return();
              }
            } finally {
              if (_didIteratorError16) {
                throw _iteratorError16;
              }
            }
          }

          this.$tableFooter.find('tr').html(html.join(''));
          this.$tableFooter.show();
          clearTimeout(this.timeoutFooter_);
          this.timeoutFooter_ = setTimeout($.proxy(this.fitFooter, this), this.$el.is(':hidden') ? 100 : 0);
        }
      }

看下面截图这段代码，发现问题了吧，如果列不可见，则退出方法 Σ( ° △ °|||)︴ footer是个独立的table，由这个方法动态生成的，所以一但提前return了就不会生成页脚！！！