Angularjs - Search On The Entire Paginated Table

I'm trying to make the search field global on the entire paginated table, but currently it's just returning the rows that exists on the current selected page. My JSP Page :

Solution 1:

I finished by adapting Jaydo suggestion to my code, and here is a working demo :

https://codepen.io/lamjaguar/pen/yOrVym

JS :

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

app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.q = '';

    $scope.getData = function () {
      // needed for the pagination calc// https://docs.angularjs.org/api/ng/filter/filterreturn$filter('filter')($scope.data, $scope.q)
    }

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

    for (var i=0; i<65; i++) {
        $scope.data.push("Item "+i);
    }
  // A watch to bring us back to the // first pagination after each // filtering$scope.$watch('q', function(newValue,oldValue){             if(oldValue!=newValue){
      $scope.currentPage = 0;
  }
},true);
}]);

//We already have a limitTo filter built-in to angular,//let's make a startFrom filter
app.filter('startFrom', function() {
    returnfunction(input, start) {
        start = +start; //parse to intreturn input.slice(start);
    }
});

HTML :

<divng-app="myApp"ng-controller="MyCtrl"><inputng-model="q"id="search"class="form-control"placeholder="Filter text"><selectng-model="pageSize"id="pageSize"class="form-control"><optionvalue="5">5</option><optionvalue="10">10</option><optionvalue="15">15</option><optionvalue="20">20</option></select><ul><ling-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
      {{item}}
    </li></ul><buttonng-disabled="currentPage == 0"ng-click="currentPage=currentPage-1">
        Previous
    </button> {{currentPage+1}}/{{numberOfPages()}}
  <buttonng-disabled="currentPage >= getData().length/pageSize - 1"ng-click="currentPage=currentPage+1">
        Next
    </button></div>

Share