Пагинация ng-Grid не работает - AngularJS

HTML:

<div class="grid-style" data-ng-grid="groupGrid">
     </div>

JavaScript:

appRoot.controller('GroupController', function ($scope, $location, $resource, $http) {

var groupResource = $resource('/api/group', {}, { update: { method: 'PUT' }, add: {      method: 'POST'} });
$scope.groupList = [];    

groupResource.query(function (data) {
    $scope.groupList.length = 0;
    angular.forEach(data, function (groupData) {
        $scope.groupList.push(groupData);
    });
});

$scope.totalServerItems = 0;

$scope.pagingOptions = {
    pageSizes: [4, 8, 12, 16],
    pageSize: 250,
    currentPage: 1
};
$scope.setPagingData = function (data, page, pageSize) {
    var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
    $scope.groupList = pagedData;
    $scope.totalServerItems = data.length;
    $scope.currentPage = page;
    if (!$scope.$$phase) {
        $scope.$apply();
    }
};

$scope.getPagedDataAsync = function (pageSize, page, searchText) {
    setTimeout(function () {
        var data;
        if (searchText) {
            var ft = searchText.toLowerCase();
            $http.get('/api/group').success(function (largeLoad) {
                data = largeLoad.filter(function (item) {
                    return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                });
                $scope.setPagingData(data, page, pageSize);
            });
        } else {
            $http.get('/api/group').success(function (largeLoad) {
                $scope.setPagingData(largeLoad, page, pageSize);
            });
        }
    }, 100);
};

$scope.getPagedDataAsync($scope.pagingOptions.pageSize,     $scope.pagingOptions.currentPage);

$scope.$watch('pagingOptions', function (newVal, oldVal) {
    if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
    }
}, true);

$scope.selectedGroups = [];

$scope.groupGrid = {
    data: 'groupList',
    multiSelect: false,
    selectedItems: $scope.selectedGroups,
    enableColumnResize: false,                        
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalServerItems',
    pagingOptions: $scope.pagingOptions,
    columnDefs: [
        { field: 'groupName', displayName: 'Group Name', width: '25%' }
    ],
};
});

Моя проблема - Пагинация не работает, как и в - Не отображается номер текущей страницы. - Когда я изменяю размер страницы (например, 4), количество элементов в сетке не меняется (остается 16 - общее количество элементов, которые у меня есть). - Количество элементов в сетке меняется только после двойного нажатия кнопки перехода на следующую страницу.


javascript pagination angularjs ng-grid
person kvothe    schedule 16.11.2013    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Является ли ваш ввод «pagingOptions.currentPage» максимально недействительным?

https://github.com/angular-ui/ng-grid/issues/598

Вам просто нужно было обновить ng-grid до последней версии.

person Eugen Breaur    schedule 25.11.2013
comment
Не знаю, я удалил эти страницы. Я перешел с ng-Grid, бывший коллега предложил мне ng-Table. В любом случае спасибо. - person kvothe; 25.11.2013

arrow_upward
0
arrow_downward

Я довольно долго искал, как сделать разбиение на страницы в ng-grid, но так и не получил то, что хотел. А потом я наткнулся на ng-table.

Кажется, у него есть то, что я хочу, поэтому я предлагаю его в качестве альтернативы ng-grid.

person kvothe    schedule 17.12.2013

arrow_upward
0
arrow_downward

Чтобы получить текущую страницу в ng-grid, передайте точное значение int в переменную текущей страницы, для этого я изменил свой код следующим образом.

$scope.pagingOptions = {
    pageSizes: [4, 8, 12, 16],
    pageSize: 250,
    currentPage: parseInt(pageId,10);
};

pageId = 1 или 2 или 3 и т. д. по вашему желанию.

person user1954367    schedule 24.04.2015

arrow_upward
0
arrow_downward

Добавьте приведенный ниже код в свой файл js.

var pageop=false;
        $scope.$watch('pagingOptions.pageSize', function (newVal, oldVal) {
            if(pageop){
  $scope.getPagedDataAsync($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage);                 

            }else{
                 pageop=true;
             }

        }, true);
person Community    schedule 05.08.2015