Mixing
angular 4 filter pipe used with server pagination
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am using filter with pagination. It works fine but the problem is that when i search Name it filters the result but pagination remains the same like if search result return 3 filter records the pagination stills shows pages and user can navigate these pages. I want to change my pagination number with search filter. Here is my example code
<input type="text" placeholder="User Name" name="username" [(ngModel)]="_userListParams.UserName" class="form-control">
<pagination-controls (pageChange)="pageChanged($event)" (pageChange)="Paging.currentPage = $event"></pagination-controls>
<table class="table table-hover">
<thead>
<tr>
<th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
</tr>
</thead>
<tbody>
<tr [routerLink]="['/UserDetails', row.Id]" *ngFor="let row of tableData2.dataRows | filter: 'Name': _userListParams.UserName | paginate: { itemsPerPage: Paging.pageSize, currentPage: Paging.currentPage,totalItems: Paging.totalCount} ;let i = index;">
<td>{{i+1}}</td>
<td>{{row.Name}}</td>
<td>{{row.TypeName}}</td>
<td>{{row.Country}}</td>
<td>{{row.Status}}</td>
<td>{{row.ItemsQty}}</td>
<td><img class="panel-profile-img" height="70" width="70" src="{{imgurl+row.ProfilePic}}" alt=""></td>
</tr>
<tr *ngIf="tableData2.dataRows.length == 0">
<td colspan="7" class="text-center text-danger">No Record Found!</td>
</tr>
</tbody>
</table>
Here is my pipe i am using
@Pipe({ name: "filter" })
export class FilterPipe implements PipeTransform {
transform(items: any,field: string, searchText: string): any {
if(!items) return ;
if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
debugger;
return it[field].toLowerCase().includes(searchText);
});
}
}
Attached Image
angular pagination angular-pipe asked Jan 3 at 13:03
Shamshad JamalShamshad Jamal
719
add a comment |
I am using filter with pagination. It works fine but the problem is that when i search Name it filters the result but pagination remains the same like if search result return 3 filter records the pagination stills shows pages and user can navigate these pages. I want to change my pagination number with search filter. Here is my example code
<input type="text" placeholder="User Name" name="username" [(ngModel)]="_userListParams.UserName" class="form-control">
<pagination-controls (pageChange)="pageChanged($event)" (pageChange)="Paging.currentPage = $event"></pagination-controls>
<table class="table table-hover">
<thead>
<tr>
<th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
</tr>
</thead>
<tbody>
<tr [routerLink]="['/UserDetails', row.Id]" *ngFor="let row of tableData2.dataRows | filter: 'Name': _userListParams.UserName | paginate: { itemsPerPage: Paging.pageSize, currentPage: Paging.currentPage,totalItems: Paging.totalCount} ;let i = index;">
<td>{{i+1}}</td>
<td>{{row.Name}}</td>
<td>{{row.TypeName}}</td>
<td>{{row.Country}}</td>
<td>{{row.Status}}</td>
<td>{{row.ItemsQty}}</td>
<td><img class="panel-profile-img" height="70" width="70" src="{{imgurl+row.ProfilePic}}" alt=""></td>
</tr>
<tr *ngIf="tableData2.dataRows.length == 0">
<td colspan="7" class="text-center text-danger">No Record Found!</td>
</tr>
</tbody>
</table>
Here is my pipe i am using
@Pipe({ name: "filter" })
export class FilterPipe implements PipeTransform {
transform(items: any,field: string, searchText: string): any {
if(!items) return ;
if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
debugger;
return it[field].toLowerCase().includes(searchText);
});
}
}
Attached Image
angular pagination angular-pipe asked Jan 3 at 13:03
Shamshad JamalShamshad Jamal
719
you are using multiple pipes, i think the "paginate" pipe is more interesting for your question
– enno.void
Jan 3 at 13:08
yes i have to use multiple pipes to achieve my goal.
– Shamshad Jamal
Jan 3 at 13:13
You should really avoid using a pipe for filtering, instead just filter in the component using array methods or RxJS.
– Alexander Staroselsky
Jan 3 at 13:45
add a comment |
I am using filter with pagination. It works fine but the problem is that when i search Name it filters the result but pagination remains the same like if search result return 3 filter records the pagination stills shows pages and user can navigate these pages. I want to change my pagination number with search filter. Here is my example code
<input type="text" placeholder="User Name" name="username" [(ngModel)]="_userListParams.UserName" class="form-control">
<pagination-controls (pageChange)="pageChanged($event)" (pageChange)="Paging.currentPage = $event"></pagination-controls>
<table class="table table-hover">
<thead>
<tr>
<th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
</tr>
</thead>
<tbody>
<tr [routerLink]="['/UserDetails', row.Id]" *ngFor="let row of tableData2.dataRows | filter: 'Name': _userListParams.UserName | paginate: { itemsPerPage: Paging.pageSize, currentPage: Paging.currentPage,totalItems: Paging.totalCount} ;let i = index;">
<td>{{i+1}}</td>
<td>{{row.Name}}</td>
<td>{{row.TypeName}}</td>
<td>{{row.Country}}</td>
<td>{{row.Status}}</td>
<td>{{row.ItemsQty}}</td>
<td><img class="panel-profile-img" height="70" width="70" src="{{imgurl+row.ProfilePic}}" alt=""></td>
</tr>
<tr *ngIf="tableData2.dataRows.length == 0">
<td colspan="7" class="text-center text-danger">No Record Found!</td>
</tr>
</tbody>
</table>
Here is my pipe i am using
@Pipe({ name: "filter" })
export class FilterPipe implements PipeTransform {
transform(items: any,field: string, searchText: string): any {
if(!items) return ;
if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
debugger;
return it[field].toLowerCase().includes(searchText);
});
}
}
Attached Image
angular pagination angular-pipe asked Jan 3 at 13:03
Shamshad JamalShamshad Jamal
719
I am using filter with pagination. It works fine but the problem is that when i search Name it filters the result but pagination remains the same like if search result return 3 filter records the pagination stills shows pages and user can navigate these pages. I want to change my pagination number with search filter. Here is my example code
<input type="text" placeholder="User Name" name="username" [(ngModel)]="_userListParams.UserName" class="form-control">
<pagination-controls (pageChange)="pageChanged($event)" (pageChange)="Paging.currentPage = $event"></pagination-controls>
<table class="table table-hover">
<thead>
<tr>
<th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
</tr>
</thead>
<tbody>
<tr [routerLink]="['/UserDetails', row.Id]" *ngFor="let row of tableData2.dataRows | filter: 'Name': _userListParams.UserName | paginate: { itemsPerPage: Paging.pageSize, currentPage: Paging.currentPage,totalItems: Paging.totalCount} ;let i = index;">
<td>{{i+1}}</td>
<td>{{row.Name}}</td>
<td>{{row.TypeName}}</td>
<td>{{row.Country}}</td>
<td>{{row.Status}}</td>
<td>{{row.ItemsQty}}</td>
<td><img class="panel-profile-img" height="70" width="70" src="{{imgurl+row.ProfilePic}}" alt=""></td>
</tr>
<tr *ngIf="tableData2.dataRows.length == 0">
<td colspan="7" class="text-center text-danger">No Record Found!</td>
</tr>
</tbody>
</table>
Here is my pipe i am using
@Pipe({ name: "filter" })
export class FilterPipe implements PipeTransform {
transform(items: any,field: string, searchText: string): any {
if(!items) return ;
if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
debugger;
return it[field].toLowerCase().includes(searchText);
});
}
}
Attached Image
angular pagination angular-pipe angular pagination angular-pipe asked Jan 3 at 13:03
Shamshad JamalShamshad Jamal
719
asked Jan 3 at 13:03
Shamshad JamalShamshad Jamal
719
edited Jan 3 at 13:16
Shamshad Jamal
asked Jan 3 at 13:03
Shamshad JamalShamshad Jamal
719
asked Jan 3 at 13:03
Shamshad JamalShamshad Jamal
719
asked Jan 3 at 13:03
Shamshad JamalShamshad Jamal
719
719
you are using multiple pipes, i think the "paginate" pipe is more interesting for your question
– enno.void
Jan 3 at 13:08
yes i have to use multiple pipes to achieve my goal.
– Shamshad Jamal
Jan 3 at 13:13
You should really avoid using a pipe for filtering, instead just filter in the component using array methods or RxJS.
– Alexander Staroselsky
Jan 3 at 13:45
add a comment |
you are using multiple pipes, i think the "paginate" pipe is more interesting for your question
– enno.void
Jan 3 at 13:08
yes i have to use multiple pipes to achieve my goal.
– Shamshad Jamal
Jan 3 at 13:13
You should really avoid using a pipe for filtering, instead just filter in the component using array methods or RxJS.
– Alexander Staroselsky
Jan 3 at 13:45
you are using multiple pipes, i think the "paginate" pipe is more interesting for your question
– enno.void
Jan 3 at 13:08
you are using multiple pipes, i think the "paginate" pipe is more interesting for your question
– enno.void
Jan 3 at 13:08
yes i have to use multiple pipes to achieve my goal.
– Shamshad Jamal
Jan 3 at 13:13
yes i have to use multiple pipes to achieve my goal.
– Shamshad Jamal
Jan 3 at 13:13
You should really avoid using a pipe for filtering, instead just filter in the component using array methods or RxJS.
– Alexander Staroselsky
Jan 3 at 13:45
You should really avoid using a pipe for filtering, instead just filter in the component using array methods or RxJS.
– Alexander Staroselsky
Jan 3 at 13:45
add a comment |
1 Answer
1
active
oldest
votes
Try setting the autoHide option on the <pagination-controls> element to force it to disappear if all results fit onto page 1.
Documentation linked to the relevant section: https://www.npmjs.com/package/ngx-pagination#api
Edited to remove my suggestion to remove the totalItems option. Missed the part of the title where you said "server pagination". Facepalm.
answered Jan 3 at 15:37
christine.hackchristine.hack
12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54022873%2fangular-4-filter-pipe-used-with-server-pagination%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try setting the autoHide option on the <pagination-controls> element to force it to disappear if all results fit onto page 1.
Documentation linked to the relevant section: https://www.npmjs.com/package/ngx-pagination#api
Edited to remove my suggestion to remove the totalItems option. Missed the part of the title where you said "server pagination". Facepalm.
answered Jan 3 at 15:37
christine.hackchristine.hack
12
add a comment |
Try setting the autoHide option on the <pagination-controls> element to force it to disappear if all results fit onto page 1.
Documentation linked to the relevant section: https://www.npmjs.com/package/ngx-pagination#api
Edited to remove my suggestion to remove the totalItems option. Missed the part of the title where you said "server pagination". Facepalm.
answered Jan 3 at 15:37
christine.hackchristine.hack
12
add a comment |
Try setting the autoHide option on the <pagination-controls> element to force it to disappear if all results fit onto page 1.
Documentation linked to the relevant section: https://www.npmjs.com/package/ngx-pagination#api
Edited to remove my suggestion to remove the totalItems option. Missed the part of the title where you said "server pagination". Facepalm.
answered Jan 3 at 15:37
christine.hackchristine.hack
12
Try setting the autoHide option on the <pagination-controls> element to force it to disappear if all results fit onto page 1.
Documentation linked to the relevant section: https://www.npmjs.com/package/ngx-pagination#api
Edited to remove my suggestion to remove the totalItems option. Missed the part of the title where you said "server pagination". Facepalm.
answered Jan 3 at 15:37
christine.hackchristine.hack
12
edited Jan 3 at 16:12
answered Jan 3 at 15:37
christine.hackchristine.hack
12
answered Jan 3 at 15:37
christine.hackchristine.hack
12
answered Jan 3 at 15:37
christine.hackchristine.hack
12
12
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54022873%2fangular-4-filter-pipe-used-with-server-pagination%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you are using multiple pipes, i think the "paginate" pipe is more interesting for your question
– enno.void
Jan 3 at 13:08
yes i have to use multiple pipes to achieve my goal.
– Shamshad Jamal
Jan 3 at 13:13
You should really avoid using a pipe for filtering, instead just filter in the component using array methods or RxJS.
– Alexander Staroselsky
Jan 3 at 13:45