angularjs - AngularJS ng-grid 分页对整个数据进行排序

Question

我正在使用启用了分页和客户端排序的 ng-grid。当我单击列标题以对数据进行排序时，它可以工作。但它只对当前页面上的数据进行排序。我的意思是我对每一页进行排序。我希望它对所有数据进行排序并显示当前页面。例如，如果我在第 2 页并按 id 排序，它会显示第 1 页，id 为 5、7、10、11、12，当我到第 2 页时，它会显示 id 1、2、6、8、9 . 虽然我希望它在第 1 页上显示 1、2、5、6、7，在第 2 页上显示 8、9、10、11、12。我怎样才能做到这一点？

谢谢

Answer 1

这是我解决这个问题的方法。基本思想是手动对包含所有数据的数组进行排序，然后再次进行分页。

定义初始排序值

$scope.sortInfo = {fields: ['id'], directions: ['asc']};

定义一个函数来对某个字段的数据进行排序

// sort over all data
function sortData (field, direction) {
  if (!$scope.allData) return;
  $scope.allData.sort(function (a, b) {
    if (direction == "asc") {
      return a[field] > b[field] ? 1 : -1;
    } else {
      return a[field] > b[field] ? -1 : 1;
    }
  })
}

观察sortInfo变化并对变化做出反应

// sort over all data, not only the data on current page
$scope.$watch('sortInfo', function (newVal, oldVal) {
  sortData(newVal.fields[0], newVal.directions[0]);
  $scope.pagingOptions.currentPage = 1;
  setPagingData($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize)
}, true);

setPagingData在哪里

// pick the slice we currently want to see
function setPagingData (page, pageSize){
  if (!$scope.allData) return;
  $scope.totalServerItems = $scope.allData.length;
  $scope.myData = $scope.allData.slice((page - 1) * pageSize, page * pageSize);;
};

在您的 gridOptions 中设置 sortInfo

$scope.gridOptions = {
  sortInfo: $scope.sortInfo,
  useExternalSorting: true,
}