两个表具有相同的分页值：ngx-pagination

时间：2019-05-09 13:41:21

标签： angular pagination ngx-pagination

我有2个表，每个表中的行都是动态添加的。基于这些动态添加的行，将显示分页。一页上显示的行数取决于下拉列表。

面临的问题：仅当我开始将行添加到第二张表时，才会显示第一张表的分页。

TypeScript代码：

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代码：

<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%;
}

还附上了屏幕截图以供参考。Before Adding the rows for Each table

After Adding rows to first table

添加几行后，分页未显示在上方图像Pagination displayed after adding rows to second table

但是在向第二张表中添加行后显示了分页，但这是不正确的

请帮助我解决分页问题，​​或者为Angular提供一些好的分页示例

1 个答案:

答案 0 :(得分：0)

Atlast发现了问题。 当两个表在同一页面中并且使用ngx-pagination时，我们必须提供PaginatePipe的ID，并且PaginatePipe中给定的ID必须与PaginationControlsComponent id匹配。

更新的HtmlCode：

<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]="j"
                        *ngFor="let tnGroup of createOrderForm.get('tnList').controls | 
                                                    paginate:{ id: 'portingTnPagination',
                                                                itemsPerPage: tableRowsToBeDisplayed, 
                                                                currentPage: page,
                                                                totalItems: totalTns}; 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 id="portingTnPagination" 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>

其中PaginatePipe和PaginationControlsComponent具有相同的ID。

参考网址：https://github.com/michaelbromley/ngx-pagination

相关问题
最新问题