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

Question

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

下面是我的 columns 数组中的一个对象的示例：

{
  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>

最后，这里是为表格准备数据的函数。应该知道，这段代码下面是一个 API 调用，它设置 $scope.donations 等于端点返回的值：

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;

};

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

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

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

我集成了一个名为 angular-dragdrop 的插件，允许我将项目从侧边栏拖到表格中以添加到列对象中，并且还可以相互拖动列以更改它们在表格上的位置，所以不要让那个把你弄糊涂了。

感谢您的任何帮助。

Answer 1

在对组数据进行分页时，我遇到了同样的问题。因此，我在 getGroups 函数 [ng-table.js] 的末尾添加了这些行。

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

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