2017-04-12 2 views
0

ページングを使用してテーブルをフィルタリングしようとしていますが、検索テキストは現在のページのレコードのみをフィルタします。現在のページだけでなく、データセット全体をフィルタリングする必要があります。それを動作させる方法はありますか?ありがとう。ここでangularJs(現在のものだけでなく)のページ番号付きすべてのページをフィルタリングします。

は私のcontroller.js view.jspで

angular.module("app").controller(
    "billetController", 
    function($scope, billetService) { 
     var self = this; 
     self.billets = []; 
     self.aCandidates = []; 
     $scope.totalItems = 0; 
     var cols = [ { 
      name : 'idBillet', 
      orderDesc : false 
     }, { 
      name : 'statutBillet', 
      orderDesc : false 
     }, { 
      name : 'dateCreation', 
      orderDesc : false 
     }, { 
      name : 'prioriteBillet', 
      orderDesc : false 
     }, { 
      name : 'impactBillet', 
      orderDesc : false 
     }, { 
      name : 'slaProjet', 
      orderDesc : false 
     } ]; 

     // get all 
     self.getBillets = function() { 
      billetService.getBillets().then(
        function(d) { 
         console.log(d); 
         self.billets = d; 
         $scope.totalItems = self.billets.length; 
         $scope.$watch("currentPage", function() { 
          console.log($scope.currentPage); 
          self.aCandidates = self.billets.slice(
            ($scope.currentPage - 1) 
              * $scope.itemsPerPage, 
            $scope.currentPage 
              * $scope.itemsPerPage); 
         }); 

        }, function(errResponse) { 
         console.error('Error while fetching '); 
        }); 
     } 

     self.getBillets(); 
     $scope.currentPage = 1; 
     $scope.itemsPerPage = 50; 

     function setPagingData(page) { 
      $scope.currentPage = page; 
      var pagedData = self.billets.slice((page - 1) 
        * $scope.itemsPerPage, page * $scope.itemsPerPage); 
      self.aCandidates = pagedData; 
     } 

     $scope.sortData = function(sortCol) { 
      // make sure it a valid column 
      var column = cols.find(function(col) { 
       return col.name === sortCol; 
      }); 
      $scope.sortType = sortCol; // set the default sort type 
      $scope.sortReverse = column.orderDesc; 
      if (!column) 
       return; 
      column.orderDesc = !column.orderDesc; 
      var order = !column.orderDesc ? 1 : -1; 
      self.billets.sort(function(a, b) { 
       if (a[column.name] < b[column.name]) 
        return -1 * order; 
       if (a[column.name] > b[column.name]) 
        return 1 * order; 
       return 0; 
      }); 

      setPagingData($scope.currentPage); 
     };}); 

と私のテーブルです:

      <div class="header"> 
           <h4 class="title">Liste des billets</h4> 
           <a href="#"></a> 
           <p class="text-info">Rechercher un billet</p> 
           <form> 
            <div class="form-group"> 
             <div class="input-group"> 
              <div class="input-group-addon"> 
               <i class="fa fa-search"></i> 
              </div> 
              <input type="text" class="form-control" 
               ng-model="searchBillet"> 
             </div> 
            </div> 
           </form> 
          </div> 
          <div class="content table-responsive table-full-width"> 
           <table class="table table-hover" ts-wrapper> 
            <thead> 
             <th><a href="#" ng-click="sortData('idBillet')"> ID 
               <span ng-show="sortType == 'idBillet' && !ctrl.sortReverse" 
               class="fa fa-caret-down"></span> <span 
               ng-show="sortType == 'idBillet' && ctrl.sortReverse" 
               class="fa fa-caret-up"></span> 
             </a></th> 
             <th><a href="#" ng-click="sortData('statutBillet')"> 
               Statut <span 
               ng-show="sortType == 'statutBillet' && !sortReverse" 
               class="fa fa-caret-down"></span> <span 
               ng-show="sortType == 'statutBillet' && sortReverse" 
               class="fa fa-caret-up"></span> 
             </a></th> 
             <th><a href="#" ng-click="sortData('prioriteBillet')"> 
               Priorité <span 
               ng-show="sortType == 'prioriteBillet' && !sortReverse" 
               class="fa fa-caret-down"></span> <span 
               ng-show="sortType == 'prioriteBillet' && sortReverse" 
               class="fa fa-caret-up"></span> 
             </a></th> 
             <th><a href="#" ng-click="sortData('impactBillet')"> 
               Impact <span 
               ng-show="sortType == 'impactBillet' && !sortReverse" 
               class="fa fa-caret-down"></span> <span 
               ng-show="sortType == 'impactBillet' && sortReverse" 
               class="fa fa-caret-up"></span> 
             </a></th> 
             <th>Resumé</th> 
             <th><a href="#" ng-click="sortData('slaProjet')"> 
               Projet <span 
               ng-show="sortType == 'slaProjet' && !sortReverse" 
               class="fa fa-caret-down"></span> <span 
               ng-show="sortType == 'slaProjet' && sortReverse" 
               class="fa fa-caret-up"></span> 
             </a></th> 
             <th><a href="#" ng-click="sortData('dateCreation')"> 
               Date de création <span 
               ng-show="sortType == 'dateCreation' && !sortReverse" 
               class="fa fa-caret-down"></span> <span 
               ng-show="sortType == 'dateCreation' && sortReverse" 
               class="fa fa-caret-up"></span> 
             </a></th> 
             <th width="20%">Actions</th> 
            </thead> 
            <tbody> 
             <tr ng-repeat="b in ctrl.aCandidates | filter:searchBillet "> 
              <td>{{ b.idBillet }}</td> 
              <td>{{ b.statutBillet }}</td> 
              <td style="padding-right: 30px"><span 
               ng-class="{'alert alert-danger col-md-50 ': b.prioriteBillet === 'urgente'|| b.prioriteBillet === 'immédiate','alert alert-info col-md-50 ': b.prioriteBillet === 'normale'|| b.prioriteBillet === 'basse','alert alert-warning col-md-50 ': b.prioriteBillet === 'élevée','alert alert-success col-md-50 ': b.prioriteBillet === 'aucune'}"> 
                {{b.prioriteBillet }}</span></td> 
              <td>{{ b.impactBillet }}</td> 
              <td>{{ b.resumeBillet }}</td> 
              <td>{{ b.slaProjet.nomProjet }}</td> 
              <td>{{ b.dateCreation | date:'yyyy-MM-dd HH:mm:ss' }}</td> 
              <td> 
               <button type="button" ng-click="ctrl.getBillet(b.idBillet)" 
                class="btn btn-info custom-width" data-toggle="modal" 
                data-target="#myModal"> 
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span> 
               </button> 
               <button type="button" class="btn btn-info custom-width" 
                ng-click="ctrl.getSla(b.idBillet)" data-toggle="modal" 
                data-target="#myModalSla"> 
                <span class="glyphicon glyphicon-list-alt" 
                 aria-hidden="true"></span> 
               </button> 
              </td> 
             </tr> 
            </tbody> 
           </table> 
           <uib-pagination total-items="totalItems" ng-model="currentPage" 
            items-per-page="itemsPerPage"></uib-pagination> 
          </div> 

答えて

関連する問題