CODEWITHSUNDEEP
javascriptangularjs
JohnLemon
JohnLemon

Reputation: 91

how to make a correct search when pagination

I can not understand. How to make a correct search when pagination? English for bad writing. I did so:

var app = angular.module('appTelDirectory', []);

app.controller('directoryList', function($scope) {
  
  $scope.currentPage = 0;
  $scope.pageSize = 10;
  $scope.users = [{}]
  
  $scope.numberOfPages = function() {
    return Math.ceil($scope.users.length / $scope.pageSize);
  }
  
  for (var i = 0; i < 45; i++) {
    $scope.users.push({
      'name': 'user' + i
    });
  }
});

app.filter('startFrom', function() {
  return function(input, start) {
    start = +start; //parse to int
    return input.slice(start);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appTelDirectory" ng-controller="directoryList">
  <input placeholder="Поиск..." ng-model="searchAll" class="form-control">
  <ul>
    <li ng-repeat="item in users | filter:searchAll | startFrom:currentPage*pageSize | limitTo:pageSize">{{item.name}}</li>
  </ul>
  
  <table>
    <tr ng-repeat="item in users | startFrom:currentPage*pageSize | limitTo:pageSize">
  </table>
  
  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>
  
  {{currentPage+1}}/{{numberOfPages()}}
  
  <button ng-disabled="currentPage >= users.length/pageSize - 1" ng-click="currentPage=currentPage+1">
    Next
  </button>
</div>

How do I change the number of items, depending on the user list. NumberOfPages unchanged...

Upvotes: 2

Views: 84

Answers (1)

Shashank Agrawal
Shashank Agrawal

Reputation: 25807

You can use a separate list for it like this. Basically, I'm using another list filteredUsers. Now instead of using filter in the view i.e. filter:searchAll, I'm doing the same thing using the underlying $filter service in the $watch which will be invoked as I type in the field.

Now, we always have the filtered users in the filteredUsers scope variable so your further calculation now can be based on the $scope.filteredUsers not on $scope.users.

var app = angular.module('appTelDirectory', []);

app.controller('directoryList', function($scope, $filter) {

  $scope.currentPage = 0;
  $scope.pageSize = 10;
  $scope.users = [{}];
  
  // Using a separate list of filtered users
  $scope.filteredUsers = [{}];

  $scope.numberOfPages = function() {
    return Math.ceil($scope.filteredUsers.length / $scope.pageSize);
  }

  for (var i = 0; i < 45; i++) {
    $scope.users.push({
      'name': 'user' + i
    });
  }

  $scope.filteredUsers = angular.copy($scope.users);

  $scope.$watch('searchAll', function(newValue) {
    // Manually filtering here instead doing in the view
    $scope.filteredUsers = $filter('filter')($scope.users, {$: newValue});
  });
});

app.filter('startFrom', function() {
  return function(input, start) {
    start = +start; //parse to int
    return input.slice(start);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appTelDirectory" ng-controller="directoryList">
  <input placeholder="Поиск..." ng-model="searchAll" class="form-control">
  <ul>
    <li ng-repeat="item in filteredUsers | startFrom:currentPage*pageSize | limitTo:pageSize">{{item.name}}</li>
  </ul>

  <table>
    <tr ng-repeat="item in users | startFrom:currentPage*pageSize | limitTo:pageSize">
  </table>

  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>

  {{currentPage+1}}/{{numberOfPages()}}

  <button ng-disabled="currentPage >= filteredUsers.length/pageSize - 1" ng-click="currentPage=currentPage+1">
    Next
  </button>
</div>

Upvotes: 1

Related Questions