AngularJS ng网格,对整个数据进行分页排序
我使用的是启用分页和客户端排序的ng网格。当我单击列标题以对数据进行排序时,它会起作用。但它只对当前页面上的数据进行排序。我是说我把每一页都整理好了。我希望它对所有数据进行排序并显示当前页面。例如,如果我在第2页并按id排序,它将显示id为5、7、10、11、12的第1页,当我转到第2页时,它将显示id为1、2、6、8、9。我想让它在第1页显示1,2,5,6,7,在第2页显示8,9,10,11,12。我怎样才能做到这一点AngularJS ng网格,对整个数据进行分页排序,angularjs,Angularjs,我使用的是启用分页和客户端排序的ng网格。当我单击列标题以对数据进行排序时,它会起作用。但它只对当前页面上的数据进行排序。我是说我把每一页都整理好了。我希望它对所有数据进行排序并显示当前页面。例如,如果我在第2页并按id排序,它将显示id为5、7、10、11、12的第1页,当我转到第2页时,它将显示id为1、2、6、8、9。我想让它在第1页显示1,2,5,6,7,在第2页显示8,9,10,11,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,
}