CODEWITHSUNDEEP
javascriptangularjsfilterpagination
Royal
Royal

Reputation: 407

Pagination numbers don't change when filtering data

I have a situation where I want to show a list of events, what goes well. Now I made a checkbox filter, whether I can select if I want to show events in the past or not. The max amount of events per page is 10, so the pagination starts to work and show me that there are 2 pages available ( 12 events currently).

When I uncheck the checkbox to see events in the past, I only have 4 events left in the past. The problem is that my pagination still let me see that there are 2 available pages, but when I click on page 2, there is a empty list (it doesn't show me the events.)

The good thing is, my filter is working ;)

My Controller:

angular.module('app')
.controller("UserProfileController", ["userService", "eventService", "$routeParams", "$scope", "currentuserCache", "userOverviewStateService",
    function(userService, eventService, $routeParams, $scope, currentuserCache, userOverviewStateService) { 
$scope.behavior = {
        currentPage: 1,
    };
$scope.maxSizePagination = 3;
$scope.itemsPerPage = 10; 


self.hideOldDates = function() {
        if (self.showOldEvents) {
            return function() {
                return true;
            };
        } else {
            return function(event) {
                var yesterday = moment(new Date()).subtract(1, 'days');
                var evtDate = moment(event['date'], 'DD-MM-YYYY');
                return evtDate > yesterday;
            };
        }
    };

function createEventArray(){
        var events = self.user._events;
        self.eventArray = [];

        for (var i in events) {
            var dates = self.eventDates(events[i], self.user);
            for (var j in dates) {
                var event = {};
                event._id = events[i]._id;
                event.title = events[i].title;
                event.date = dates[j];
                event.dateForSorting = moment(event.date, 'DD-MM-YYYY').format("YYYY-MM-DD");
                event.start = moment(events[i].start).format('HH:mm');
                event.end = moment(events[i].end).format('HH:mm');
                event.eventStatus = events[i].eventStatus;
                self.eventArray.push(event);
            }
        };
       };

The HTML

<tbody>
        <tr ng-repeat="event in profileCtrl.eventArray | orderBy: ['dateForSorting', 'start']  | filter: profileCtrl.hideOldDates() | start: (behavior.currentPage - 1) * itemsPerPage | limitTo: itemsPerPage">
            <td> <a href="/#/eventProfile/{{event._id}}/{{event.date}}">{{event.title}}</a> </td>
            <td> {{ event.date }} </td>
            <td> {{ event.start }} </td>
            <td> {{ event.end }} </td>
            <td> {{ event.eventStatus | translate }} </td>
            <td>
                <button class="btn btn-default" ng-click="profileCtrl.unsubscribe(event)">{{ 'unSubscribe' | translate }}</button>
            </td>
        </tr>
<uib-pagination ng-if="profileCtrl.eventArray.length" total-items="profileCtrl.eventArray.length" items-per-page="itemsPerPage" ng-model="behavior.currentPage" class="pagination-sm" max-size="maxSizePagination" direction-links="true" boundary-links="true" boundary-link-numbers="true" first-text="&laquo;" last-text="&raquo;" previous-text="&lsaquo;" next-text="&rsaquo;" style="margin:0"></uib-pagination>

<input type="checkbox" ng-model="profileCtrl.showOldEvents"> {{'includeOldDates' | translate}} </input>
    </tbody>

So, when all events (future & past) are selected, it all works fine. 14 events = 2 pages. But when I only want to see event in the future, it will show 4 events in the future, 2 pages. (must be 1 of course).

I hope someone can give me some eyeopening advice!

Thanks in advance!

Upvotes: 1

Views: 191

Answers (1)

Nitish
Nitish

Reputation: 661

I am not sure this will work, as i dont have any plunker.

But we had similar problem, then used filter to show length. Like,

{{ (profileCtrl.eventArray | filter: profileCtrl.hideOldDates()).length }}

so in your 

<uib-pagination ng-if="profileCtrl.eventArray.length" total-items="(profileCtrl.eventArray | filter: profileCtrl.hideOldDates()).length" items-per-page="itemsPerPage" ng-model="behavior.currentPage" class="pagination-sm" max-size="maxSizePagination" direction-links="true" boundary-links="true" boundary-link-numbers="true" first-text="&laquo;" last-text="&raquo;" previous-text="&lsaquo;" next-text="&rsaquo;" style="margin:0"></uib-pagination>

Upvotes: 1

Related Questions