AngularJS - Suche auf der gesamten paginierten Tabelle

Ich versuche, das Suchfeld global für die gesamte paginierte Tabelle zu machen, aber es gibt gerade die Zeilen zurück, die auf der aktuell ausgewählten Seite existieren.AngularJS - Suche auf der gesamten paginierten Tabelle

Meine JSP Seite:

<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>

Und hier ist mein 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

Quelle

2016-04-20 Brahim LAMJAGUAR

Bitte können Sie nur die betreffende HTML und einen Teil der Steuerung schreiben. – nubinub

Vielen Dank für Ihre Antwort, hier sind nur die betroffenen Teile. –

Ihr Suchfilter wird ausgeführt, nachdem Sie nach Paginierung gefiltert haben, wenn Sie vor dem Paginieren suchen müssen. – Jaydo

ich durch Anpassung Jaydo Vorschlag an meinen Code fertig, und hier ist eine funktionierende 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>

Quelle

2016-05-13 11:16:40

AngularJS - Suche auf der gesamten paginierten Tabelle

Antwort

Verwandte Themen