Multiple Paginators in same page.

[NabinKhatiwada]

@mariuszfoltak
Hi , I have added 3 tables in same page. Those are for selecting Block,Floor and Flat by users.
Parent(Block) will be shown and 2 child will be hidden. On click of Block,Floor will be show and Block + Flat will be hidden.

But pagination is not working properly. Block is displaying fine but Flat and Floor are paginted from 3rd or 4th pages.
I mean to say,pagination is in sync. Where parent pagination ends, from there only Child Pagination Starts:

Code:

Configure Society {{societyName}}

    </div>

    <div class="card-block">


      <form [formGroup]=societyTemplateForm (ngSubmit)=saveSocietyTemplateForm(societyTemplateForm.value)>
        <div class="form-group row">

          <div class="col-md-6">
            <label>Add {{textBoxLabel}}</label>
            <input type="text" formControlName="societyResidenceFieldName" class="form-control" placeholder="Society Residence Field Value">
          </div>
        </div>



        <div class="form-group row">
          <div class="col-md-6">
            <button type="submit" class="btn btn-primary px-2" [disabled]="societyTemplateForm.invalid">Save</button>

          </div>
        </div>
      </form>
    </div>

  </div>

</div>

List of {{textBoxLabel}}S

List of {{textBoxLabel}}S under {{parentSocietyResidenceFieldName0}}

    <div class="table-responsive">
      <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
        <thead>
          <tr>
            <th style="width: 20%">
              <mfDefaultSorter by="societyResidenceFieldName">Society Unit Name</mfDefaultSorter>
            </th>

            <th style="width: 20%">
              Action
            </th>
          </tr>
        </thead>
        <tbody>
          <template ngFor let-item [ngForOf]="mf.data">
            <tr *ngIf="item.residenceTemplateField.orderNumber == 1">
              <td>{{item.societyResidenceFieldName}}</td>
              <td><button type="button" *ngIf="residenceFieldsLength > 2" (click)="viewChild1(item.id,item.societyResidenceFieldName)" class="btn btn-primary px-1">View Units</button></td>
            </tr>
          </template>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="7">
              <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>

    <!--<table class="table table-striped .table-responsive" [mfData]="data | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="10">
      <thead>
        <tr>
          <th style="width: 20%">
            <mfDefaultSorter by="societyResidenceFieldName">Society Unit Name</mfDefaultSorter>
          </th>

          <th style="width: 20%">
            Action
          </th>
        </tr>
      </thead>
      <tbody>
        <template ngFor let-item [ngForOf]="mf.data">
          <tr *ngIf="item.residenceTemplateField.orderNumber == 1 && item.parentSocietyResidenceFieldId == filterListId">
            <td>{{item.societyResidenceFieldName}}</td>
            <td><button type="button" *ngIf="residenceFieldsLength > 2" (click)="viewChild1(item.id)" class="btn btn-primary px-1">View Units</button></td>
          </tr>
        </template>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="7">
            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
          </td>
        </tr>
      </tfoot>
    </table>-->

  </div>
</div>

List of {{textBoxLabel}}S under {{parentSocietyResidenceFieldName1}}

    <table class="table table-striped .table-responsive" [mfData]="data | dataFilter : filterQuery" #mf="mfDataTable" [mfRowsOnPage]="10">
      <thead>
        <tr>
          <th style="width: 20%">
            <mfDefaultSorter by="societyResidenceFieldName">Society Unit Name</mfDefaultSorter>
          </th>

          <!--<th style="width: 20%">
                    <mfDefaultSorter by="name">Action</mfDefaultSorter>
                  </th>-->
        </tr>
      </thead>
      <tbody>
        <template ngFor let-item [ngForOf]="mf.data">
          <tr *ngIf="item.residenceTemplateField.orderNumber == 2 && item.parentSocietyResidenceFieldId == filterListId">
            <td>{{item.societyResidenceFieldName}}</td>

          </tr>
        </template>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="7">
            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
          </td>
        </tr>
      </tfoot>
    </table>

  </div>
</div>