I'm working on Angular app page to filter a table with pagination but the search text filters only the current page's records.
The requirement is to filter the entire data set not only the current page. Is there any possible way to make it work? Thanks.
Here is my controller script
//individual controllers separated by functionality
sysmonControllers.controller("serverConfigController", ['$scope', 'userProfileService','sharedUtilService','$mdToast','notificationServices','$filter','configService','notificationServices',
function($scope,userProfileService,sharedUtilService,$mdToast,notificationServices,$filter,configService,notificationServices){
$scope.serverToConfigure = {};
$scope.searchPhrase='';
$scope.monProcSearchPhrase='';
$scope.availableProcSearchPhrase='';
$scope.activeConfigView='server';
$scope.processToMonitor=[];
$scope.errorKeywords=[];
$scope.warningKeywords=[];
$scope.healthyKeywords=[];
$scope.registeredUsers=[];
$scope.addUser = function(user){
var tempUser = {
firstName: user.firstName,
lastName: user.lastName,
emailNotificationsId:{
emailId: user.emailNotificationsId.emailId,
serverId:null
},
emailId: user.emailId,
phoneNumber: user.phoneNumber,
country: null,
lastUpdate: null,
primaryAddr: null,
secondaryAddr: null,
servers: null,
state: null,
zipcode: null
};
$scope.serverToConfigure.emailNotifications.push(tempUser);
$scope.cards.showRegisterArea =! $scope.cards.showRegisterArea;
}
$scope.removeUser = function(userToRemove){
if($scope.serverToConfigure.emailNotifications.indexOf(userToRemove) != -1){
index = $scope.serverToConfigure.emailNotifications.indexOf(userToRemove);
$scope.serverToConfigure.emailNotifications.splice(index, "1");
}
}
$scope.addLogLocation = function(logLocation){
var templogLocation = {
location_id: null,
server_id: null,
locationPath: logLocation.locationPath
};
$scope.serverToConfigure.logLocations.push(templogLocation);
$scope.cards.showLogArea =! $scope.cards.showLogArea;
}
$scope.removeLogLocation = function(logLocationToRemove){
if($scope.serverToConfigure.logLocations.indexOf(logLocationToRemove) != -1){
index = $scope.serverToConfigure.logLocations.indexOf(logLocationToRemove);
$scope.serverToConfigure.logLocations.splice(index, "1");
}
}
//have them closed for now
$scope.cards ={
showMonProcs: true,
showLogArea: true,
showEmailArea: true,
showRegisterArea: false
};
$scope.query = {
serverOrder:'serverName',
processOrder:'processName',
limit: 5,
page: 1,
multiSelect: false
};
$scope.setServerToConfigure=function(server){
$scope.serverToConfigure=server;
$scope.errorKeywords=server.errorKeywords.split(",");
$scope.warningKeywords=server.warningKeywords.split(",");
$scope.healthyKeywords=server.healthyKeywords.split(",");
}
$scope.removeMonProc=function(processId){
for(var i=0; i<$scope.serverToConfigure.serverProcess.length; i++){
if($scope.serverToConfigure.serverProcess[i].processId===processId){
$scope.serverToConfigure.serverProcess[i].monitorFlg='N';
$scope.serverToConfigure.serverProcess[i].dirty='true';
}
}
}
$scope.addMonProcs=function(){
for(var i=0; i< $scope.processToMonitor.length; i++){
for(var j=0; j<$scope.serverToConfigure.serverProcess.length; j++){
if($scope.processToMonitor[i].processId===$scope.serverToConfigure.serverProcess[j].processId){
$scope.serverToConfigure.serverProcess[j].monitorFlg='Y';
$scope.serverToConfigure.serverProcess[j].dirty='true';
}
}
}
}
$scope.refreshServers = function() {
$scope.loadEnvironments();
}
$scope.toggleConfigView=function(view){
// reset page
if($scope.activeConfigView == 'config'){
$scope.query.page = 1;
}
switch(view){
case'server':
$scope.activeConfigView=view;
break;
case'config':
$scope.activeConfigView=view;
break;
}
}
$scope.formatKeywordsToSave = function(keywords){
var stringBuilder= '';
for(var i=0; i<keywords.length; i++){
stringBuilder=stringBuilder+ ','+keywords[i];
}
return stringBuilder;
}
$scope.saveServerConfig=function(){
$scope.showSaveProgress=true;
var tempMemChart = $scope.serverToConfigure.memoryChart;
$scope.serverToConfigure.memoryChart=null;
var serverToSave= angular.copy($scope.serverToConfigure) ;
$scope.serverToConfigure.memoryChart=tempMemChart;
serverToSave.errorKeywords=$scope.errorKeywords.join(",");
serverToSave.warningKeywords=$scope.warningKeywords.join(",");
serverToSave.healthyKeywords=$scope.healthyKeywords.join(",");
serverToSave.lastUpdate= new Date();
serverToSave.registeredUsers = $scope.registeredUsers;
for(var i=0; i<serverToSave.serverProcess.length; i++) {
var servers = new Object();
servers.serverId= serverToSave.serverId;
serverToSave.serverProcess[i].servers=servers;
}
for(var i=0; i<serverToSave.serverLogs.length; i++) {
var servers = new Object();
servers.serverId= serverToSave.serverId;
serverToSave.serverLogs[i].servers=servers;
}
for(var i=0; i<serverToSave.emailNotifications.length; i++) {
var emailNotifications = new Object();
var emailNotificationsId = new Object();
emailNotificationsId.emailId = serverToSave.emailNotifications[i].emailNotificationsId.emailId;
emailNotifications.country = serverToSave.emailNotifications[i].country;
emailNotifications.firstName = serverToSave.emailNotifications[i].firstName;
emailNotifications.lastName = serverToSave.emailNotifications[i].lastName;
emailNotifications.phoneNumber = serverToSave.emailNotifications[i].phoneNumber;
emailNotifications.lastUpdate = serverToSave.emailNotifications[i].lastUpdate;
emailNotifications.primaryAddr = serverToSave.emailNotifications[i].primaryAddr;
emailNotifications.secondaryAddr = serverToSave.emailNotifications[i].secondaryAddr;
emailNotifications.state = serverToSave.emailNotifications[i].state;
emailNotifications.zipcode = serverToSave.emailNotifications[i].zipcode;
var servers = new Object();
servers.serverId = serverToSave.serverId;
emailNotifications.servers = servers;
emailNotificationsId.serverId = servers.serverId;
emailNotifications.emailNotificationsId = emailNotificationsId;
serverToSave.emailNotifications[i] = emailNotifications;
}
configService.saveServerConfig(serverToSave, function(saveResponse){
var response= saveResponse.result;
if(response==="SUCCESS"){
$scope.isSavingData=false;
console.log("success!");
notificationServices.showToast('success','top right',2000,'server-summary-table');
$scope.refreshServers();
$scope.showSaveProgress=false;
}
else{
$scope.isSavingData=false;
console.log("fail!");
$scope.showSaveProgress=false;
notificationServices.showToast('failure','top right',2000,'server-summary-table');
}
});
$scope.init=function(){
}
$scope.init();
}])
and my table in HTML:
<md-card-content id="server-options-summary" ng-show="activeConfigView==='server'">
<md-table-container style="color:white">
<table md-table md-row-select multiple="false" ng-model="serverToConfigure" md-progress="promise" >
<thead md-head md-order="query.serverOrder" md-on-reorder="">
<tr md-row>
<th md-column md-order-by="serverId"><span>Server ID</span></th>
<th md-column md-order-by="serverName"><span>Server Name</span></th>
<th md-column md-order-by="environmentName"><span>Environment </span></th>
<th md-column md-order-by="lastUpdated">Last Updated</th>
<th md-column md-order-by="statusColor">Server Status</th>
<th md-column >Action</th>
</tr>
</thead>
<tbody md-body >
<tr md-row md-select="serverToConfigure" ng-repeat="s in $parent.servers | orderBy: query.serverOrder | limitTo: query.limit : (query.page -1) * query.limit | filter :searchPhrase">
<td md-cell>{{s.serverId}}</td>
<td md-cell>{{s.serverName}}</td>
<td md-cell>{{s.environmentName}}</td>
<td md-cell>{{s.lastUpdated | date :"short"}}</td>
<td md-cell><md-icon ng-style="{'color': generateStatusColor(s.statusColor)}">{{getIconByColor(s.statusColor)}}</md-icon></td>
<td md-cell><md-button class="md-fab md-mini" style="background-color:#86bc25" ng-click="toggleConfigView('config');setServerToConfigure(s)" ><md-icon>build</md-icon> <md-tooltip >configure</md-tooltip></md-button></td>
</tr>
</tbody>
</table>
</md-table-container>
<md-table-pagination style="color:white" md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page" md-total="{{$parent.servers.length}}" md-page-select></md-table-pagination>
</md-card-content>
