I have 2 tables, where each tables rows are added dynamically. Based on these dynamically added rows the pagination will be displayed. Numbers of rows to be displayed for one page is decided on dropdown.
Problem facing: First table pagination will be displayed only when I start adding the rows to second table.
TypeScript Code:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormArray, FormGroup } from '@angular/forms';
import { SelectItem } from 'primeng/api';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
createOrderForm: FormGroup;
isAllPortTnsSelected: boolean;
tablePaginationDropDowns: SelectItem[];
tableRowsToBeDisplayed: number;
totalTns: number;
/**
* Disconnect TN's related fields
*/
isAllDisconnectTnsSelected: boolean;
totalDisconnectTns: number;
disconnectTableRows: number;
constructor(private formBuilder: FormBuilder) {
this.tableRowsToBeDisplayed = 5;
this.disconnectTableRows = 5;
this.totalTns = 0;
this.totalDisconnectTns = 0;
}
ngOnInit() {
this.loadTablePaginationDropDowns();
//load the form with all form controls.
this.createOrderForm = this.formBuilder.group({
tnList: this.formBuilder.array([]),
tnListDropDown: [''],
disconnectTnList: this.formBuilder.array([]),
disconnectTnDropDown: ['']
});
// any change in the porting tn table pagination dropdown, it should reflect the value
this.createOrderForm.get('tnListDropDown').valueChanges.subscribe(
data => {
this.changePortingTnDropDownValue(data);
}
)
//any change in the disconnect tn table pagination dropdown, it should reflect the value
this.createOrderForm.get('disconnectTnDropDown').valueChanges.subscribe(
data => {
this.changeDisconnectTnDropDownValue(data);
}
)
}
loadTablePaginationDropDowns() {
this.tablePaginationDropDowns = [
{ label: "5", value: "five" },
{ label: "10", value: "ten" },
{ label: "15", value: "fifteen" },
{ label: "20", value: "twenty" }
]
}
addTnGroup(): FormGroup {
return this.formBuilder.group({
tnCheckBox: [''],
fromTn: [''],
toTn: ['']
});
}
addTnRow() {
//get the reference for the portingTnList and add one more set of tnGroup
// before adding the tn group we need to typecast the control to FormArray
(<FormArray>this.createOrderForm.get('tnList')).push(this.addTnGroup());
this.totalTns = (<FormArray>this.createOrderForm.get('tnList')).length;
}
removeTnRow(group: FormArray = <FormArray>this.createOrderForm.get('tnList')) {
const tempArray: FormArray = new FormArray([]);
Object.keys(group.controls).forEach (
(key: string) => {
const abstractControl = group.get(key);
if(abstractControl instanceof FormGroup) {
if (!this.removeTnRowIfSelected(abstractControl)) {
tempArray.push(abstractControl);
}
}
}
);
while(group.length != 0) {
group.removeAt(0);
}
while(tempArray.length != 0) {
group.push(tempArray.at(0));
tempArray.removeAt(0);
}
this.totalTns = group.length;
}
removeTnRowIfSelected(group: FormGroup): boolean{
if (group.get('tnCheckBox') && group.get('tnCheckBox').value !== '') {
return true;
} else {
return false;
}
}
selectAllTns() {
this.selectAndDisSelectAllTns();
this.isAllPortTnsSelected = !this.isAllPortTnsSelected;
}
selectAndDisSelectAllTns(group: FormArray = <FormArray>this.createOrderForm.get('tnList')) {
Object.keys(group.controls).forEach(
(key: string) => {
const abstractControl = group.get(key);
if (abstractControl instanceof FormGroup) {
this.selectAndDisSelectTnsInGroup(abstractControl);
}
}
)
}
selectAndDisSelectTnsInGroup(group: FormGroup) {
if (!this.isAllPortTnsSelected) {
group.get('tnCheckBox').setValue('select');
} else {
group.get('tnCheckBox').setValue('');
}
}
AddBulkTns() {
console.log(this.createOrderForm.get('tnList'));
}
/**
* *******************************************************************************************************
* START OF CODE RELATED TO Disconnect TNs Table (which adds dynamically the rows and deletion of the rows)
* *******************************************************************************************************
*/
addDisconnectTnGroup(): FormGroup {
return this.formBuilder.group({
tnDisconnectCheckBox: [''],
fromDisconnectTn: [''],
toDisconnectTn: ['']
});
}
addDisconnectTnRow() {
//get the reference for the portingTnList and add one more set of tnGroup
// before adding the tn group we need to typecast the control to FormArray
(<FormArray>this.createOrderForm.get('disconnectTnList')).push(this.addDisconnectTnGroup());
this.totalDisconnectTns = (<FormArray>this.createOrderForm.get('disconnectTnList')).length;
}
removeDisconnectTnRow(group: FormArray = <FormArray>this.createOrderForm.get('disconnectTnList')) {
const tempArray: FormArray = new FormArray([]);
Object.keys(group.controls).forEach(
(key: string) => {
const abstractControl = group.get(key);
if (abstractControl instanceof FormGroup) {
if (!this.removeDisconnectTnRowIfSelected(abstractControl)) {
tempArray.push(abstractControl);
}
}
}
);
while (group.length != 0) {
group.removeAt(0);
}
while (tempArray.length != 0) {
group.push(tempArray.at(0));
tempArray.removeAt(0);
}
this.totalDisconnectTns = group.length;
}
removeDisconnectTnRowIfSelected(group: FormGroup): boolean {
if (group.get('tnDisconnectCheckBox') && group.get('tnDisconnectCheckBox').value !== '') {
return true;
} else {
return false;
}
}
selectAllDisconnectTns() {
this.selectAndDisSelectAllDisconnectTns();
this.isAllDisconnectTnsSelected = !this.isAllDisconnectTnsSelected;
}
selectAndDisSelectAllDisconnectTns(group: FormArray = <FormArray>this.createOrderForm.get('disconnectTnList')) {
console.log('selectAndDisSelectAllDisconnectTns');
Object.keys(group.controls).forEach(
(key: string) => {
const abstractControl = group.get(key);
if (abstractControl instanceof FormGroup) {
this.selectAndDisSelectDisconnectTnsInGroup(abstractControl);
}
}
)
}
selectAndDisSelectDisconnectTnsInGroup(group: FormGroup) {
if (!this.isAllDisconnectTnsSelected) {
group.get('tnDisconnectCheckBox').setValue('select');
} else {
group.get('tnDisconnectCheckBox').setValue('');
}
}
AddBulkDisconnectTns() {
console.log(this.createOrderForm.get('disconnectTnList'));
}
/**
* *******************************************************************************************************
* END OF CODE RELATED TO Disconnect TNs Table (which adds dynamically the rows and deletion of the rows)
* *******************************************************************************************************
*/
/**
* Method changeDropDownValue() used to reflect the changes done for the dropdown values which are used to
* decide the number of rows to be displayed in the table
*
* @param data : Accepts the string value of dropdown
*/
changePortingTnDropDownValue(data: string) {
if (data === 'ten') {
this.tableRowsToBeDisplayed = 10;
} else if (data === 'fifteen') {
this.tableRowsToBeDisplayed = 15;
} else if (data === 'twenty') {
this.tableRowsToBeDisplayed = 20;
} else {
this.tableRowsToBeDisplayed = 5;
}
}
changeDisconnectTnDropDownValue(data: string) {
if (data === 'ten') {
this.disconnectTableRows = 10;
} else if (data === 'fifteen') {
this.disconnectTableRows = 15;
} else if (data === 'twenty') {
this.disconnectTableRows = 20;
} else {
this.disconnectTableRows = 5;
}
}
}
HTML Code:
<h3>Dynamic</h3>
<form [formGroup]="createOrderForm">
<div class="div-grid">
<div style="width: 100%;">
<div class="top-div-checkbox">
<input class="form-check-input position-static" type="checkbox" style="margin-left: 30%; width: auto"
(click)="selectAllTns()">
</div>
<div class="top-div-label1">
<label>From TN</label>
</div>
<div class="top-div-label2">
<label>To TN</label>
</div>
</div>
<div id="gridDiv">
<table class="test">
<tbody formArrayName="tnList">
<tr [formGroupName]="i"
*ngFor="let tnGroup of createOrderForm.get('tnList').controls |
paginate:{itemsPerPage: tableRowsToBeDisplayed, currentPage: page}; let j = index">
<td class="td-checkbox">
<input type="checkbox" formControlName="tnCheckBox" [id]="'tnCheckBox'+j">
</td>
<td class="td-input1">
<input type="text" formControlName="fromTn" [id]="'fromTn'+j">
</td>
<td class="td-input2">
<input type="text" formControlName="toTn" [id]="'toTn'+j">
</td>
</tr>
</tbody>
</table>
</div>
<div class="nav-div">
<div class="pagination-div">
<pagination-controls previousLabel="" nextLabel="" (pageChange)="page = $event"></pagination-controls>
</div>
<div class="page-dropdown-div">
<select name="tnListPageDropDown" id="tnListPageDropDown" class="custom-select mr-sm-2"
formControlName="tnListDropDown" style="width: 60px">
<option value="" disabled selected>5</option>
<option *ngFor="let dropDown of tablePaginationDropDowns" [value]="dropDown.value">{{dropDown.label}}</option>
</select>
<label> items per Page</label>
</div>
<div class="total-items-div">
Total {{totalTns}} items
</div>
</div>
<div>
<button type="button" class="btn btn-info list-btns" (click)="addTnRow()">Add</button>
<button type="button" class="btn btn-info list-btns" (click)="removeTnRow()">Remove</button>
<button type="button" class="btn btn-info list-btns" (click)="AddBulkTns()">Bulk Add</button>
</div>
</div>
<div class="div-grid">
<div style="width: 100%;">
<div class="top-div-checkbox">
<input class="form-check-input position-static" type="checkbox" style="margin-left: 30%; width: auto"
(click)="selectAllDisconnectTns()">
</div>
<div class="top-div-label1">
<label>From TN</label>
</div>
<div class="top-div-label2">
<label>To TN</label>
</div>
</div>
<div id="gridDiv">
<table class="test">
<tbody formArrayName="disconnectTnList">
<tr [formGroupName]="i"
*ngFor="let discTnGroup of createOrderForm.get('disconnectTnList').controls |
paginate:{itemsPerPage: disconnectTableRows, currentPage: discTnPage}; let i = index">
<td class="td-checkbox">
<input type="checkbox" formControlName="tnDisconnectCheckBox"
[id]="'tnDisconnectCheckBox'+i">
</td>
<td class="td-input1">
<input type="text" formControlName="fromDisconnectTn" [id]="'fromDisconnectTn'+i">
</td>
<td class="td-input2">
<input type="text" formControlName="toDisconnectTn" [id]="'toDisconnectTn'+i">
</td>
</tr>
</tbody>
</table>
</div>
<div class="nav-div">
<div class="pagination-div">
<pagination-controls previousLabel="" nextLabel="" (pageChange)="discTnPage = $event">
</pagination-controls>
</div>
<div class="page-dropdown-div">
<div style="width: 25%; float: left;">
<select name="tnListPageDropDown" id="tnListPageDropDown" class="custom-select mr-sm-2"
formControlName="tnListDropDown" style="width: 60px">
<option value="" disabled selected>5</option>
<option *ngFor="let dropDown of tablePaginationDropDowns" [value]="dropDown.value">
{{dropDown.label}}</option>
</select>
</div>
<div style="width: 75%; float: right;">
<label> items per Page</label>
</div>
</div>
<div class="total-items-div">
Total {{totalDisconnectTns}} items
</div>
</div>
<div>
<button type="button" class="btn btn-info list-btns" (click)="addDisconnectTnRow()">Add</button>
<button type="button" class="btn btn-info list-btns" (click)="removeDisconnectTnRow()">Remove</button>
<button type="button" class="btn btn-info list-btns" (click)="AddBulkDisconnectTns()">Bulk Add</button>
</div>
</div>
</form>
CSS StyleSheet:
.test {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
table-layout:fixed;
border: 1px solid #ddd;
}
div {
border: 1px solid #ddd;
}
.test th, .test td {
border: 1px solid #ddd;
padding: 8px;
}
.test tr:nth-child(even) {
background-color: #f2f2f2;
}
#gridDiv {
width: 100%;
overflow-y:auto;
height: 200px;
border: 1px solid black;
}
.div-grid {
border: 1px solid black;
width: 50%;
}
td input {
width: 100%;
}
.td-checkbox {
width: 7%;
}
.td-input1{
width: 60%;
}
.td-input2{
width: 33%;
}
.top-div-checkbox {
width: 7%;
border: 1px solid #ddd;
float: left;
}
.top-div-label1 {
width: 60%;
border: 1px solid #ddd;
float: left;
}
.top-div-label2 {
width: 33%;
border: 1px solid #ddd;
float: left;
}
.nav-div {
border: 1px solid #ddd;
height: 48px;
}
.pagination-div {
width: 50%;
float: left;
}
.page-dropdown-div {
width: 30%;
float: left;
}
.total-items-div {
width: 20%;
float: left;
}
.list-btns {
padding-left: 5%;
padding-right: 5%;
margin-right: 10%;
margin-left: 2%;
}
Also attached the screenshots for reference.
After adding some rows the pagination is not displayed in the aboveimage
But Pagination displayed after adding rows to Second Table, but it is not proper
Please help me to solve the pagination issue, or suggest some good pagination examples for Angular
