在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);

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