在 ng-table 中启用分组会删除分页

Question

我正在使用 ng-table，我运行遇到了分组问题。我有它，因此可以通过 select 下拉菜单中的选项启用或禁用分组，但启用分组总是会破坏分页，而在禁用分组时它工作正常。

这是我的列数组中的对象之一的示例：

{
  field: "payeeName",
  title: "Charity",
  sortable: "payeeName",
  filter: {
    payeeName: 'select'
  },
  classes: "td-width-150",
  show: true,
  hideOnExport: true,
  groupable: "payeeName",
  buildTemplate: function(donation, idx) {
    var str = donation.payeeName + '<br/>';
    str += '<small class="text-muted">';
    str += $filter('buildAddressLine')(donation) + '<br/>';
    str += $filter('buildRegistrationId')(donation) + '<br/>';
    if (donation.designation) {
      str += donation.designation;
    }
    str += '</small>';
    return str;
  }
}

以下是打开或关闭分组时出现的行：

<tr class="ng-table-group" ng-show="grouping" ng-repeat-start="group in $groups">
 <td>
    <a href="" ng-click="group.$hideRows = !group.$hideRows">
      <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
      <strong>{{ group.value }}</strong>
    </a>
  </td>
</tr>
<tr ng-show="grouping" ng-hide="group.$hideRows" ng-repeat="user in group.data" ng-repeat-end>
  <td ng-repeat="col in $columns track by $index" class="{{col.classes}}" {{col.hide}} ng-bind-html="col.buildTemplate(user, $index)"></td>
</tr>
<tr ng-show="!grouping" ng-repeat="user in $data">
  <td ng-repeat="col in cols track by $index" class="{{col.classes}}" {{col.hide}} ng-bind-html="col.buildTemplate(user, $index)"></td>
</tr>

最后，这里是为 table 准备数据的函数。应该知道，在这段代码下面是一个 API 调用，它设置 $scope.donations 等于端点 returns:

var prepData = function(checkFilter) {
  var orderFilter = params.filter();
  // add grid filters to the data we loaded in get data
  var filteredData = params.filter() ? $filter('filter')($scope.donations, params.filter()) : $scope.donations;
  // apply the global filter

  filteredData = $filter('filter')(filteredData, $scope.globalTableFilter);


  var orderedData = params.sorting() ?
    $filter('orderBy')(filteredData, params.orderBy()) :
    filteredData;

  orderedData = $filter('filter')(orderedData, $scope.filterDonation);

  // Prep data for export
  $scope.exportData = angular.copy(orderedData);
  $scope.exportData.forEach(function(e) {
    e.donationDate = $filter('date')(e.donationDate, 'dd/MM/yyyy');
    e.receiptAmount = $filter('currency')(e.receiptAmount);
  });
  // recalc the pagination - MUST PRECEED THE PAGE SLICE

  params.total(orderedData.length);
  $scope.$emit('gotDonations', $scope.orderedData);

  $scope.filterDonations = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
  return $scope.filterDonations;

};

当通过 select 输入启用分组时，它会触发如下所示的函数：$scope.tableDonationParams.group({payeeName: 'asc'})
当通过 select 输入禁用分组时，它会触发：
$scope.tableDonationParams.group({})

正如我所说，只要将分组设置为空白对象，分页就可以正常工作，但在启用时会完全中断。

为了清楚起见，这是我的 table 的图片：http://imgur.com/f6WyksA

我集成了一个名为 angular-dragdrop 的插件，允许我将项目从侧边栏拖到 table 以添加到列对象，也可以将列相互拖动以更改它们定位在 table 上，所以不要让你感到困惑。

感谢您的所有帮助。

Answer 1

我在对组数据进行分页时遇到了同样的问题。所以，我在 getGroups 函数 [ng-table.js].

的末尾添加了这些行

if (!settings.dataOptions.applyPaging) {
    return ngTableDefaultGetData(result, params);
}
return ngTableDefaultGetData.applyPaging(result, params);

使用默认或自定义的分页。

在 ng-table 中启用分组会删除分页

Enabling grouping in ng-table removes the pagination

pagination

angularjs

ngtable