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

发布时间：2020-12-17 07:32:35 所属栏目：安全来源：网络整理

导读：我正在使用ng-grid启用分页和客户端排序.当我单击列标题以获取数据排序时,它可以正常工作.但它只对当前页面上的数据进行排序.我的意思是我将每个页面排序.我希望它能够对所有数据进行排序并显示当前页面.例如,如果我在第2页并按ID排序,它将向我显示第1页,其

我正在使用ng-grid启用分页和客户端排序.当我单击列标题以获取数据排序时,它可以正常工作.但它只对当前页面上的数据进行排序.我的意思是我将每个页面排序.我希望它能够对所有数据进行排序并显示当前页面.例如,如果我在第2页并按ID排序,它将向我显示第1页,其中包含ID 5,7,10,11,12,当我转到第2页时,它将向我显示ID 1,2,6,8,9 .虽然我希望它在第1页显示1,5,7和第2页显示8,9,12.我怎样才能做到这一点？

谢谢

这是我如何解决这个问题.基本思路是手动对包含所有数据的数组进行排序,然后重新进行分页.

定义初始排序值

$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,}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!