Pagination count not changing in Angularjs with multiple filter

Question

I have multiple custom filters in my page along with a pagination. The filtering works, and so does the pagination, but the pagination count doesnt change after i filter my data. :(

i think i am missing out on something...

have created a dummy JsFiddle

Also i need to filter the data based on the value from the textbox. but i am not sure how to add that filter in this.

HTML

<div class="container">
    <div ng-controller="EmpCtrl">
    <p><strong>
        Start: {{startDate | date: "dd/MM/yyyy" }} |    
        End: {{endDate | date: "dd/MM/yyyy"}}
    </strong></p>

        <input type="text" ng-model="bonusFilter" placeholder="search" />
        <br><br>
        <ul>
            <li ng-repeat="record in filtered = records | betweenDateRange:startDate:endDate | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit ">
                <div>
                    <b>{{ record.name }}</b>
                    <b>{{ record.bonus }}</b>
        <span>{{ record.doj | date: "dd/MM/yyyy" }}</span> 
                </div>
            </li>
        </ul>
        <pagination page="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit"></pagination>
    </div>
</div>

JS

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('EmpCtrl', function ($scope) {
    $scope.records = [
           {"doj" : new Date("2017/06/29"),"bonus" : 250, "name": "a1"},
           {"doj" : new Date("2017/06/12"),"bonus" : 150, "name": "b1"},
           {"doj" : new Date("2017/05/18"),"bonus" : 250, "name": "c1"},
           {"doj" : new Date("2017/06/03"),"bonus" : 150, "name": "d1"},
           {"doj" : new Date("2017/06/25"),"bonus" : 750, "name": "e1"},
           {"doj" : new Date("2017/06/27"),"bonus" : 1500, "name": "a1"},
           {"doj" : new Date("2017/06/17"),"bonus" : 232, "name": "w1"},
           {"doj" : new Date("2017/08/11"),"bonus" : 322, "name": "e1"},
           {"doj" : new Date("2017/06/21"),"bonus" : 455, "name": "c1"},
           {"doj" : new Date("2017/06/22"),"bonus" : 145, "name": "b1"},
           {"doj" : new Date("2017/05/25"),"bonus" : 766, "name": "a1"},
           {"doj" : new Date("2017/06/28"),"bonus" : 150, "name": "a1"},
           {"doj" : new Date("2017/06/29"),"bonus" : 750, "name": "c1"},
           {"doj" : new Date("2017/06/27"),"bonus" : 1500, "name": "b1"},
           {"doj" : new Date("2017/06/28"),"bonus" : 500, "name": "a1"},
           {"doj" : new Date("2017/08/24"),"bonus" : 650, "name": "c1"},
           {"doj" : new Date("2017/06/27"),"bonus" : 1500, "name": "d1"},
           {"doj" : new Date("2017/06/26"),"bonus" : 500, "name": "d1"},
           {"doj" : new Date("2017/08/13"),"bonus" : 650, "name": "w1"},
           {"doj" : new Date("2017/06/21"),"bonus" : 250, "name": "x1"},
           {"doj" : new Date("2017/06/22"),"bonus" : 150, "name": "f1"},
           {"doj" : new Date("2017/05/15"),"bonus" : 250, "name": "f1"},
           {"doj" : new Date("2017/06/16"),"bonus" : 150, "name": "a1"},
           {"doj" : new Date("2017/06/16"),"bonus" : 750, "name": "c1"},
           {"doj" : new Date("2017/06/17"),"bonus" : 1500, "name": "c1"},
           {"doj" : new Date("2017/06/22"),"bonus" : 500, "name": "e1"},
           {"doj" : new Date("2017/08/13"),"bonus" : 650, "name": "d1"}
        ];

        // pagination controls
        $scope.currentPage = 1;
        $scope.totalItems = $scope.records.length;
        $scope.entryLimit = 5; // items per page
        $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);

        //Date funtionality
        $scope.startDate = moment().subtract(6,'d').format('YYYY-MM-DD') ;
        $scope.endDate = moment().format('YYYY-MM-DD');

});

app.filter('startFrom', function () {
    return function (input, start) {
        if (input) {
            start = +start;
            return input.slice(start);
        }
        return [];
    };
});

//ES6 - vipin
app.filter('betweenDateRange', function () {
  return function (items, startDate, endDate) {
    return items.filter(function (item) {
      return ((item.doj >= moment(startDate)) && (item.doj <= moment(endDate)));
    });
  };
});

Fetrarij · Accepted Answer · 2017-06-29 14:20:37Z

You need to get the array filtered without the pagination filter, and use this array for your new pagination length. (startFrom and limitTo are not counted) :

<li ng-repeat="record in filtered = (records | betweenDateRange:startDate:endDate | filter:{bonus: bonusFilter}) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit ">

here "filtered" is the new array and use it to calculate the new pagination, could be:

$scope.noOfPages = function(array) {
    $scope.totalItems = array.length;
    return Math.ceil($scope.totalItems / $scope.entryLimit);
}

in your controller and :

<pagination page="currentPage" max-size="noOfPages(filtered)" total-items="totalItems" items-per-page="entryLimit"></pagination>

Also i need to filter the data based on the value from the textbox. but i am not sure how to add that filter in this.

use filter for it, depending on what you want, if it's only for bonus then: filter: {bonus: bonusFilter}

new fiddle: https://jsfiddle.net/kpc1Ldu9/1/

Collectives™ on Stack Overflow

Pagination count not changing in Angularjs with multiple filter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related