angularjsdirpagination

dirPagination numbers not change when ng-model search put something


At first, I'm using dirPagination. The problem is that when I search something, it's filtered correctly, but pagination number not change and also show all last number in pagination without any change and I see some page is empty because it does filter but page number is show.

<div data-ng-controller='productsController'>
    <form `class='form-inline'>
        <div class='form-group'>
            <label>search</label>
            <input type='text' data-ng-model='search' class='form-control' placeholder='search' />
        </div>
    </form>

    <table class='table table-striped'>
        <thead>
            <tr>
                <th>#</th>
                <th>product</th>
                <th>imet</th>
                 </tr>
        </thead>
        <tbody>
            <tr dir-paginate='product in products|itemsPerPage:12|filter:search|orderBy:sortKey:reverse'>
                <td>{{product.id}}</td>
                <td>{{product.productName}}</td>
                <td>{{product.time}}</td>
            </tr>
        </tbody>
    </table>
    <dir-pagination-controls max-size='10' direction-links='true' boundary-links='true' >
    </dir-pagination-controls>
    <script>
        (function(){
        var app = angular.module('products', ['angularUtils.directives.dirPagination']);
        app.controller('productsController', function($scope, $http){
        $scope.products = [];
        $http.get('/products/json').success(function(data){
            $scope.products= data;
        });
    });
    })();
</script>
</div>

Solution

  • itemsPerPage must be the last filter, as below:

    <tr dir-paginate='product in products | filter: search | orderBy: sortKey: reverse | itemsPerPage: 12'>
    

    For more explanation, check it on FAQ on michaelbromley/angularUtils/.