Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: mdbTablePagination

Guidtm free asked 5 years ago


Hello i'm trying to change mdbTablePagination.allItemsLength manually but the value is not changing

this is my code.

this.gridLotes = data;

this.mdbTable.setDataSource(this.gridLotes.subLotes);

this.mdbTablePagination.allItemsLength = this.gridLotes.qtdRegistros;

this.gridLotes.subLotes = this.mdbTable.getDataSource();

this.previous = this.mdbTable.getDataSource();

this.cdRef.detectChanges();


Bartosz Termena staff answered 5 years ago


Dear @Guidtm

Here you go: TS

  @ViewChild(MdbTablePaginationComponent, { static: true })
  mdbTablePagination: MdbTablePaginationComponent;
  @ViewChild(MdbTableDirective, { static: true }) mdbTable: MdbTableDirective;
  elements: any = [];
  previous: any = [];
  headElements = ['ID', 'First', 'Last', 'Handle'];

  constructor(private cdRef: ChangeDetectorRef) {}

  ngOnInit() {
    for (let i = 1; i <= 15; i++) {
      this.elements.push({
        id: i.toString(),
        first: 'User ' + i,
        last: 'Name ' + i,
        handle: 'Handle ' + i,
      });
    }

    this.mdbTable.setDataSource(this.elements);
    this.elements = this.mdbTable.getDataSource();
    this.previous = this.mdbTable.getDataSource();
  }

  ngAfterViewInit() {
    this.mdbTablePagination.setMaxVisibleItemsNumberTo(5);

    this.mdbTablePagination.calculateFirstItemIndex();
    this.mdbTablePagination.calculateLastItemIndex();
    this.mdbTablePagination.allItemsLength = this.mdbTablePagination.allItemsLength + 150;
    this.cdRef.detectChanges();
    console.log(this.mdbTablePagination.allItemsLength);
  }

HTML

<div class="container">
  <table mdbTable #tableEl="mdbTable" class="z-depth-1">
    <thead>
      <tr>
        <th *ngFor="let head of headElements; let i = index" scope="col">{{ head }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let el of elements; let i = index">
        <th
          *ngIf="i + 1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
          scope="row"
        >
          {{ el.id }}
        </th>
        <td
          *ngIf="i + 1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
        >
          {{ el.first }}
        </td>
        <td
          *ngIf="i + 1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
        >
          {{ el.last }}
        </td>
        <td
          *ngIf="i + 1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
        >
          {{ el.handle }}
        </td>
      </tr>
    </tbody>
    <tfoot class="grey lighten-5 w-100">
      <tr>
        <td colspan="4">
          <mdb-table-pagination
            [tableEl]="tableEl"
            [searchDataSource]="elements"
          ></mdb-table-pagination>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

Best Regards, Bartosz.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.5.0
  • Device: PC
  • Browser: Google Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No