Doro Doro - 4 months ago 10
AngularJS Question

Filter does not show as I expected

I made a table that displays values from an array, to which I added a filter. The table is paginated with a maximum of 5 records per page.

The problem occurs when I apply the filter. For example, if you do a search for the term "ora" will have three records, one on each page.

How do these results to display together (on one page, or how many pages it needs, but not dissipated) and when I remove the filter to display it normal (in all pages)?

The live code is available here: https://plnkr.co/edit/QIcmQUqABDJcV3H6vqRo?p=preview

HTML:

<body ng-app="salariesApp" ng-controller="mainCtrl">
<table class="table">
<thead>
<tr>
<th ng-click="sortBy(id)">Nr. crt.</th>
<th ng-click="sortBy(an)">Anul</th>
<th ng-click="sortBy('den')">Denumirea institutiei/companiei</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableSearch"></td>
<td class="tableSearch"><input class="form-control" type="text" id="inputYear" ng-model="searchSal.an" ng-value={{crrYear}} /></td>
<td class="tableSearch"><input class="form-control" type="text" id="inputName" ng-model="searchSal.den" /></td>
</tr>
<tr ng-repeat="rows in showSal | filter: searchSal | orderBy: sortProperty: !reverse | filter : paginate track by $index">
<td class="spa-col-md-1">{{rows.id}}</td>
<td class="spa-col-md-2">{{rows.an}}</td>
<td class="col-md-5">{{rows.den}}</td>
</tr>
</tbody>
</table>

<pagination total-items="totalItems" ng-model="currentPage" max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
</body>


JS:

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

app.constant("appConst", {
pagesLimit: 5,
crrYear: 2016
});

app.controller('mainCtrl', ['$scope', 'appConst', function($scope, appConst) {
$scope.crrYear = appConst.crrYear;

$scope.pageNum = {
linkBtnClass: 'linkBtnClass cursor-pointer'
};

$scope.showSal = [
{ id: '1', an: '2016', den: 'Oracle Romania' },
{ id: '2', an: '2016', den: 'Microsoft' },
{ id: '3', an: '2016', den: 'Computer Generated Solutions - CGS Europe' },
{ id: '4', an: '2016', den: 'IBM' },
{ id: '5', an: '2016', den: 'Luxoft' },
{ id: '6', an: '2016', den: 'Oracle Romania' },
{ id: '7', an: '2016', den: 'Luxoft' },
{ id: '8', an: '2016', den: 'Computer Generated Solutions - CGS Europe' },
{ id: '9', an: '2016', den: 'IBM' },
{ id: '10', an: '2016', den: 'Luxoft' },
{ id: '11', an: '2016', den: 'Oracle Romania' },
{ id: '12', an: '2016', den: 'Microsoft' },
{ id: '13', an: '2016', den: 'IBM' },
{ id: '14', an: '2016', den: 'Luxoft' }
];

$scope.searchSal = '';

$scope.sortProperty = $scope.showSal.id;
$scope.reverse = true;
$scope.sortBy = function (sortProperty) {
$scope.reverse = ($scope.sortProperty === sortProperty) ? !$scope.reverse : false;
$scope.sortProperty = sortProperty;
};



// PAGINATION:
$scope.totalItems = $scope.showSal.length;
$scope.currentPage = 1;
$scope.numPerPage = 5;

$scope.paginate = function(value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.showSal.indexOf(value);
return (begin <= index && index < end);
};


$scope.getOptionsClass = function (index) {
if (index > 0) {
return 'thumbnail nav-option-r';
} else {
return 'thumbnail nav-option-l';
}
};
}]);

Lex Lex
Answer

I adapted this from this JSFiddle which is listed on the Angular JSFiddle Examples page of the wiki. I couldn't figure out your pagination so I just put buttons on there, but you should be able to extrapolate and apply this to your pagination functionality. By applying the filter which simply removes the elements from the array that are not displayed on the current page and using limitTo pagination becomes very easy and doesn't exhibit the behavior you were seeing where each item would display on its own page.

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

app.constant("appConst", {
  pagesLimit: 5,
  crrYear: 2016
});

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

app.controller('mainCtrl', ['$scope', '$filter', 'appConst',
      function($scope, $filter, appConst) {
        $scope.crrYear = appConst.crrYear;

        $scope.pageNum = {
          linkBtnClass: 'linkBtnClass cursor-pointer'
        };

        $scope.showSal = [{ id: '1', an: '2016', den: 'Oracle Romania' }, 
                          { id: '2', an: '2016', den: 'Microsoft' }, 
                          { id: '3', an: '2016', den: 'Computer Generated Solutions - CGS Europe' }, 
                          { id: '4', an: '2016', den: 'IBM' }, 
                          { id: '5', an: '2016', den: 'Luxoft' }, 
                          { id: '6', an: '2016', den: 'Oracle Romania' }, 
                          { id: '7', an: '2016', den: 'Luxoft' }, 
                          { id: '8', an: '2016', den: 'Computer Generated Solutions - CGS Europe' }, 
                          { id: '9', an: '2016', den: 'IBM' }, 
                          { id: '10', an: '2016', den: 'Luxoft' }, 
                          { id: '11', an: '2016', den: 'Oracle Romania' }, 
                          { id: '12', an: '2016', den: 'Microsoft' }, 
                          { id: '13', an: '2016', den: 'IBM' }, 
                          { id: '14', an: '2016', den: 'Luxoft' }];

        $scope.searchSal = {};

        $scope.sortProperty = $scope.showSal.id;
        $scope.reverse = true;
        $scope.sortBy = function(sortProperty) {
          $scope.reverse = ($scope.sortProperty === sortProperty) ? !$scope.reverse : false;
          $scope.sortProperty = sortProperty;
        };

        // PAGINATION:
        $scope.totalItems = ($filter('filter')($scope.showSal, $scope.searchSal)).length;
        $scope.currentPage = 0;
        $scope.numPerPage = 5;
        
        $scope.totalPages = function() {
          return Math.ceil(($filter('filter')($scope.showSal, $scope.searchSal)).length / $scope.numPerPage);
        };
      }]);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js"></script>

<div ng-controller="mainCtrl" ng-app="salariesApp">
  <table class="table">
    <thead>
      <tr>
        <th ng-click="sortBy(id)">Nr. crt.</th>
        <th ng-click="sortBy(an)">Anul</th>
        <th ng-click="sortBy('den')">Denumirea institutiei/companiei</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="tableSearch"></td>
        <td class="tableSearch">
          <input type="text" ng-value="{{crrYear}}" ng-model="searchSal.an" id="inputYear" class="form-control" />
        </td>
        <td class="tableSearch">
          <input type="text" ng-model="searchSal.den" id="inputName" class="form-control" />
        </td>
      </tr>
      <tr ng-repeat="rows in showSal | filter: searchSal | orderBy: sortProperty: !reverse |  startFrom:currentPage * numPerPage | limitTo: numPerPage track by $index">
        <td class="spa-col-md-1">{{rows.id}}</td>
        <td class="spa-col-md-2">{{rows.an}}</td>
        <td class="col-md-5">{{rows.den}}</td>
      </tr>
    </tbody>
  </table>
  <button ng-click="currentPage = currentPage - 1" ng-disabled="currentPage === 0">Prev</button> Page {{currentPage + 1}} of {{totalPages()}} <button ng-click="currentPage = currentPage + 1" ng-disabled="currentPage === totalPages() -1">Next</button>
</div>

Comments