0
我試圖過濾帶分頁的表格，但搜索文本僅過濾當前頁面的記錄。我想過濾整個數據集，而不僅僅是當前頁面。有沒有任何可能的方法來使它工作？謝謝。在angularJs中過濾所有帶分頁的頁面（不僅是當前頁面）
這裏是我的controller.js
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);
};});
和我在view.jsp的表：
<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>
謝謝！這有所幫助。 – Jiji