【问题标题】:Angular smart-table: Sum column with Pagination+SearchAngular smart-table:带有分页+搜索的求和列
【发布时间】:2026-01-21 01:45:02
【问题描述】:

我已经设置了一个带有分页和搜索的智能表,我希望显示所有活动行的列的总和。这意味着默认情况下的整个数据集以及搜索处于活动状态时过滤的数据集。智能表文档并没有说太多,所以我尝试在我的网格数据变量上设置一个手表。但是,它所做的只是汇总当前页面上的行,而忽略其他页面。有人可以指出智能表保存当前过滤数据集的位置以及是否有更好的方法来监视搜索事件?谢谢。

    $scope.$watch('gridData', function() {
        $scope.totalSum = 0;

        angular.forEach($scope.gridData, function(row) {
            $scope.totalSum += row.numericColumn;
        });
    });

【问题讨论】:

  • 看起来 smart-table 的用户数量还没有完全扩展。我会跳下去寻找另一个这样做的图书馆。

标签: angularjs smart-table


【解决方案1】:

这是最近实现的,您可以通过主控制器方法getFilteredCollection访问过滤后的集合以用于显示目的或逻辑目的(如csv导出)。显示与搜索匹配的记录数的指令示例

.directive('stSummary', function () {
    return {
      restrict: 'E',
      require: '^stTable',
      template: '<div>records:{{size}}</div>',
      scope: {},
      link: function (scope, element, attr, ctrl) {
        scope.$watch(ctrl.getFilteredCollection, function  (val) {
        scope.size = (val || []).length;
      })
     }
    }
})

【讨论】: