Pagination Not working if tab change in angular material
pawan....@pathpartnertech.com
I have using angular material ,i have created 3 tabs and same data will show in all tabs,
I have using angular material table and show that data
In first tabs by defaults i have set that 5 record its working this page pagination working but same code i have written in another tabs but second tab one shows 5 record and if i will search that then then data is shows but total no of records shown is second tab 5 my data rows is 10
`
<table mat-table [dataSource]="dataSource" matSort>
<!-- Checkbox Column -->
<ng-container matColumnDef="select" style="display: none" >
<th mat-header-cell *matHeaderCellDef class="tableheader" style="display: none">
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row" style="display: none" >
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="ProjectManager" >
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader" style="padding-left: 5px;" > Project </th>
<td mat-cell *matCellDef="let row" style="padding-left: 5px;" > {{row.Project}} </td>
</ng-container>
<ng-container matColumnDef="Project">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Project Manager </th>
<td mat-cell *matCellDef="let row"> {{row.ProjectManager}} </td>
</ng-container>
<ng-container matColumnDef="EmployeeName">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Employee Name </th>
<td mat-cell *matCellDef="let row"> {{row.EmployeeName}} </td>
</ng-container>
<ng-container matColumnDef="Jan">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Jan </th>
<td mat-cell *matCellDef="let row"> {{row.Jan}} </td>
</ng-container>
<ng-container matColumnDef="Feb">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Feb </th>
<td mat-cell *matCellDef="let row"> {{row.Feb}} </td>
</ng-container>
<ng-container matColumnDef="Mar">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Mar </th>
<td mat-cell *matCellDef="let row"> {{row.Mar}} </td>
</ng-container>
<ng-container matColumnDef="Apr">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Apr </th>
<td mat-cell *matCellDef="let row"> {{row.Apr}} </td>
</ng-container>
<ng-container matColumnDef="May">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> May </th>
<td mat-cell *matCellDef="let row"> {{row.May}} </td>
</ng-container>
<ng-container matColumnDef="Jun">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Jun </th>
<td mat-cell *matCellDef="let row"> {{row.Jun}} </td>
</ng-container>
<ng-container matColumnDef="Jul">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Jul </th>
<td mat-cell *matCellDef="let row"> {{row.Jul}} </td>
</ng-container>
<ng-container matColumnDef="Aug">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Aug </th>
<td mat-cell *matCellDef="let row"> {{row.Aug}} </td>
</ng-container>
<ng-container matColumnDef="Sep">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Sep </th>
<td mat-cell *matCellDef="let row"> {{row.Sep}} </td>
</ng-container>
<ng-container matColumnDef="Oct">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Oct </th>
<td mat-cell *matCellDef="let row"> {{row.Oct}} </td>
</ng-container>
<ng-container matColumnDef="Nov">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Nov </th>
<td mat-cell *matCellDef="let row"> {{row.Nov}} </td>
</ng-container>
<ng-container matColumnDef="Dec">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="tableheader"> Dec </th>
<td mat-cell *matCellDef="let row"> {{row.Dec}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div> this is code i have written both tabs`
and typescript code is here
I have not write data also only code snippet i have write
` displayedColumns = ['select','ProjectManager','Project','EmployeeName', 'Jan', 'Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
dataSource: MatTableDataSource;
selection = new SelectionModel(true, []);
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
selected: string;
constructor() {
const users: UserData[] = [];
// Assign the data to the data source for the table to render
this.dataSource = new MatTableDataSource(this.Data);
// this.selection = new SelectionModel(true, []);
}
/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() {
this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
}
ngOnInit(): void {
this.dataSource.paginator =this.paginator;
this.dataSource.sort = this.sort;
this.selected = '2018';
}`