2013-09-03 6 views
8

Używam ng-grid z włączonym sortowaniem stronicowania i po stronie klienta. Kiedy klikam nagłówek kolumny, aby sortować dane, to działa. Ale sortuje tylko dane na bieżącej stronie. Mam na myśli, że każda strona jest sortowana. Chcę, aby sortował wszystkie dane i wyświetlał bieżącą stronę. Na przykład, jeśli jestem na stronie 2 i sortuję według identyfikatora, to pokaże mi stronę 1 z identyfikatorami 5, 7, 10, 11, 12, a kiedy odejdę na stronę 2, pokaże mi identyfikatory 1,2,6,8,9. . Chociaż chcę, żeby pokazała mi 1,2,5,6,7 na stronie 1 i 8,9,10,11,12 na stronie2. Jak mogę to osiągnąć?AngularJS ng-grid z stronicowaniem sortowanie całych danych

Dzięki

Odpowiedz

14

Oto jak rozwiązałem ten problem. Podstawową ideą jest ręczne sortowanie tablicy zawierającej wszystkie dane i ponowne tworzenie stronicowania.

określić początkową sortowania wartości

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

zdefiniować funkcję sortowania danych w określonym zakresie

// 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; 
    } 
    }) 
} 

oglądać sortInfo i reagować na zmiany

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

gdzie setPagingData jest

// 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);; 
}; 

ustawić sortInfo w swoim gridOptions

$scope.gridOptions = { 
    sortInfo: $scope.sortInfo, 
    useExternalSorting: true, 
} 
Powiązane problemy