CODEWITHSUNDEEP
javascriptangularjshtmltwitter-bootstrappagination
Brahim LAMJAGUAR
Brahim LAMJAGUAR

Reputation: 1354

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 : 

<body ng-controller="JobController as control" class="skin-blue">
    <!-- The field search -->
    <input type="text" class="form-control" placeholder="Chercher" ng-model="search">

    <!-- The Table paginated -->
    <table id="jobstable" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th style="width: 40px;">ID</th>
                <th>Job</th>

            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="doc in filteredJobs | filter:search">
                <td><span>{{doc.id_job}}</span></td>
                <td><span ng-bind="doc.titre"></span></td>


            </tr>

        </tbody>

    </table>
    <!-- Pagination -->
    <pagination ng-model="currentPage" 
                total-items="control.jobs.length"
                max-size="maxSize" 
                boundary-links="true" >
    </pagination>

</body>

And here is my AngularJS Controller : 

'use strict';

App.controller(
                'JobController',
                [
                        '$scope',
                        'JobService',
                        function($scope, JobService) {

                            /**
                             * ******************** Pagination part
                             * *************************************
                             */

                            self.fetchAllJobs(); // All the records are retrieved

                            $scope.filteredJobs = [], $scope.currentPage = 1,
                            $scope.numPerPage = 10, $scope.maxSize = 5;

                            $scope.numPages = function() {
                                return Math.ceil(self.jobs.length
                                        / $scope.numPerPage);
                            };

                            $scope.$watch('currentPage + numPerPage',function() {
                                                var begin = (($scope.currentPage - 1) * $scope.numPerPage), 
                                                    end = begin + $scope.numPerPage;

                                                $scope.filteredJobs = self.jobs.slice(begin, end);
                                            });

                        } ]);// End of controller

Upvotes: 1

Views: 6273

Answers (1)

Brahim LAMJAGUAR
Brahim LAMJAGUAR

Reputation: 1354

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/filter
      return $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() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

HTML : 

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

Upvotes: 2

Related Questions