AngularJS ng-grid với phân trang phân loại toàn bộ dữ liệu

Question

Tôi đang sử dụng lưới ng với phân trang và phân loại phía máy khách được bật. Khi tôi nhấp vào tiêu đề cột để có được dữ liệu được sắp xếp, nó hoạt động. Nhưng nó chỉ sắp xếp dữ liệu trên trang hiện tại. Tôi có nghĩa là tôi nhận được mỗi trang được sắp xếp. Tôi muốn nó sắp xếp tất cả dữ liệu và hiển thị trang hiện tại. Ví dụ: nếu tôi ở trang 2 và sắp xếp theo id, nó sẽ hiển thị cho tôi trang 1 với các id 5, 7, 10,11, 12 và khi tôi đến trang 2, nó sẽ hiển thị cho tôi các id 1,2,6,8,9 . Trong khi tôi muốn nó hiển thị cho tôi 1,2,5,6,7 trên trang 1 và 8,9,10,11,12 trên trang 2. Làm thế nào tôi có thể đạt được điều này?

Cảm ơn

Answer 1

Đây là cách tôi giải quyết vấn đề này. Ý tưởng cơ bản là tự sắp xếp mảng chứa tất cả dữ liệu của bạn và làm lại lần nữa.

xác định phân loại ban đầu đánh giá cao

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

định nghĩa một hàm để sắp xếp dữ liệu của bạn vào một lĩnh vực nhất định

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

xem sortInfo và phản ứng với những thay đổi

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

nơi setPagingData là

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

thiết lập sortInfo trong gridOptions bạn

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