mdb-table-pagination not working when few rows

Dear carlos,

This problem should be resolved with the 7.4.3 release of MDB Angular.

If you're not sure that you're running on 7.4.3, please remove the node_modules directory and package-lock.json file, and execute the npm install command one more time.

You can check which version of MDB Angular you're using in node_modules/ng-uikit-pro-standard/package.json file or in package-lock.json file.

Best Regards,

Damian

I-m now facing an issue when dynamically change the datasource.
Looks like it keeps the last information for the footer pagination data.

So, if the first query shows 1 rec, it shows in the footer 1-1 of 1 (that-s fine). But then if I refresh data for 3 records, it keeps showing 1-1 of 3 (it should says : 1-3 of 3) Then It get crazy and you can move to other pages with none reason... (every new page only shows 1 rec.. Just like if it were in the first query)

How can I set that pagination to be automatically updated?

Dear Carlos,

When you change the items number in your table with pagination you have to call calculateFirstItemIndex() and calculateLastItemIndex() methods from mdb-table-pagination component.

Please try to do this, and check, if the problem is gone.

Also please provide me with the code which is you using.

Best Regards,

Damian

I tried that, but didnt work. (not sure If I did it fine) My code:

// method to reload the data to be shown in the Table:

for (let i = 0; i <= data.length-1; i++) { this.elements.push({ 'despacho': data[i].field1, 'cliente': data[i].field2, 'tipo': data[i].field3, 'producto': data[i].field4, 'cantidad': data[i].field5, 'venta':data[i].field6, 'real':data[i].field7}); }

      this.tableService.setDataSource(this.elements);
      this.elements = this.tableService.getDataSource();
      this.previous = this.tableService.getDataSource();

      this.mdbTablePagination.calculateFirstItemIndex();
      this.mdbTablePagination.calculateLastItemIndex();
      this.cdRef.detectChanges();

// same methods from the documentation:

ngAfterViewInit() {

this.mdbTablePagination.setMaxVisibleItemsNumberTo(5);
//this.mdbTablePagination.lastVisibleItemIndex = 5;
//this.mdbTablePagination.lastItemIndex = 5;

this.firstItemIndex = this.mdbTablePagination.firstItemIndex;
this.lastItemIndex = this.mdbTablePagination.lastItemIndex;

this.mdbTablePagination.calculateFirstItemIndex();
this.mdbTablePagination.calculateLastItemIndex();
this.cdRef.detectChanges();

}

onNextPageClick(data: any) { this.firstItemIndex = data.first; this.lastItemIndex = data.last; }

onPreviousPageClick(data: any) { this.firstItemIndex = data.first; this.lastItemIndex = data.last; }

Dear Carlos,

Could you please provide me with the full code of your table? The HTML markup and TS logic file (and data structure, if it isn't in table TS file).

Without it, I won't be able to help you well.

Best Regards,

Damian

The HTML

<table mdbTable class="z-depth-1">
    <thead>
      <tr>
        <th *ngFor="let head of headElements; let i = index" scope="col" [mdbTableSort]="elements" [sortBy]="headElements[i]">{{head}}
          <mdb-icon fas icon="sort"></mdb-icon>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let el of elements; let i = index;">
          <th *ngIf="i+1 >= firstItemIndex && i < lastItemIndex" scope="row">{{el.despacho}}</th>
          <td *ngIf="i+1 >= firstItemIndex && i < lastItemIndex">{{el.cliente}}</td>
          <td *ngIf="i+1 >= firstItemIndex && i < lastItemIndex">{{el.tipo}}</td>
          <td *ngIf="i+1 >= firstItemIndex && i < lastItemIndex">{{el.producto}}</td>
          <td *ngIf="i+1 >= firstItemIndex && i < lastItemIndex">{{el.cantidad}}</td>
          <td *ngIf="i+1 >= firstItemIndex && i < lastItemIndex">{{el.venta}}</td>
          <td *ngIf="i+1 >= firstItemIndex && i < lastItemIndex">{{el.real}}</td>
      </tr>
    </tbody>

    <tfoot class="grey lighten-5 w-100">

        <tr>
          <td colspan="6">
            <mdb-table-pagination [searchDataSource]="elements" (nextPageClick)="onNextPageClick($event)" (previousPageClick)="onPreviousPageClick($event)">
            </mdb-table-pagination>
          </td>
          <td colspan="1">
              <a mdbBtn floating="true" gradient="purple" mdbTooltip="Descargar a excel" placement="top" (click)="exportExcel()" *ngIf="elements.length>0" mdbWavesEffect>
                  <!-- <mdb-icon far icon="file-excel"></mdb-icon> -->
                  <mdb-icon fas icon="file-download"></mdb-icon>
              </a>                
          </td>
        </tr>

      </tfoot>

  </table>

TS code:

elements: any = [];

headElements = ['Despacho', 'Cliente', 'Tipo', 'Producto','Cantidad','Venta','Real'];

@ViewChild(MdbTablePaginationComponent) mdbTablePagination: MdbTablePaginationComponent;

previous: any = []; firstItemIndex; lastItemIndex;

constructor( private tableService: MdbTableService, private cdRef: ChangeDetectorRef) { ... }

run(){

this.elements = [];

// calling local service to get data (to be shown in the table)
this.util.myService(....)
    .subscribe( (res)=> {

      var data = <any[]>res.json();
      for (let i = 0; i <= data.length-1; i++) {
        this.elements.push({ 'despacho': data[i].field1, 
                             'cliente': data[i].field2, 
                             'tipo': data[i].field3, 
                             'producto': data[i].field4, 
                             'cantidad': data[i].field5,
                             'venta':data[i].field6, 
                             'real':data[i].field7});
      }           

      this.tableService.setDataSource(this.elements);
      this.elements = this.tableService.getDataSource();
      this.previous = this.tableService.getDataSource();

      this.mdbTablePagination.calculateFirstItemIndex();
      this.mdbTablePagination.calculateLastItemIndex();
      this.cdRef.detectChanges();          

    });

}

ngAfterViewInit() { this.mdbTablePagination.setMaxVisibleItemsNumberTo(5); //this.mdbTablePagination.lastVisibleItemIndex = 5; //this.mdbTablePagination.lastItemIndex = 5;

this.firstItemIndex = this.mdbTablePagination.firstItemIndex;
this.lastItemIndex = this.mdbTablePagination.lastItemIndex;

this.mdbTablePagination.calculateFirstItemIndex();
this.mdbTablePagination.calculateLastItemIndex();
this.cdRef.detectChanges();

}

onNextPageClick(data: any) { this.firstItemIndex = data.first; this.lastItemIndex = data.last; }

onPreviousPageClick(data: any) { this.firstItemIndex = data.first; this.lastItemIndex = data.last; }

Dear Carlos,

I have modified your code, and now, it's working fine. I have changed the run() method to not get data from API but from for loop, and i have removed unnecessary code from this method.

Please take a look at the below code:

.html:

<div class="container">
  <table mdbTable class="z-depth-1">
    <thead>
    <tr>
      <th *ngFor="let head of headElements; let i = index" scope="col" [mdbTableSort]="elements" [sortBy]="headElements[i]">{{head}}
        <mdb-icon fas icon="sort"></mdb-icon>
      </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let el of elements; let i = index;">
      <th *ngIf="i+1 >= firstItemIndex && i < lastItemIndex" scope="row">{{el.despacho}}</th>
      <td *ngIf="i+1 >= firstItemIndex && i < lastItemIndex">{{el.cliente}}</td>
      <td *ngIf="i+1 >= firstItemIndex && i < lastItemIndex">{{el.tipo}}</td>
      <td *ngIf="i+1 >= firstItemIndex && i < lastItemIndex">{{el.producto}}</td>
      <td *ngIf="i+1 >= firstItemIndex && i < lastItemIndex">{{el.cantidad}}</td>
      <td *ngIf="i+1 >= firstItemIndex && i < lastItemIndex">{{el.venta}}</td>
      <td *ngIf="i+1 >= firstItemIndex && i < lastItemIndex">{{el.real}}</td>
    </tr>
    </tbody>

    <tfoot class="grey lighten-5 w-100">

    <tr>
      <td colspan="6">
        <mdb-table-pagination [searchDataSource]="elements" (nextPageClick)="onNextPageClick($event)" (previousPageClick)="onPreviousPageClick($event)">
        </mdb-table-pagination>
      </td>
      <td colspan="1">
        <a mdbBtn floating="true" gradient="purple" mdbTooltip="Descargar a excel" placement="top" (click)="exportExcel()" *ngIf="elements.length>0" mdbWavesEffect>
          <!-- <mdb-icon far icon="file-excel"></mdb-icon> -->
          <mdb-icon fas icon="file-download"></mdb-icon>
        </a>
      </td>
    </tr>

    </tfoot>

  </table>
</div>

.ts:

import {ChangeDetectorRef, Component, ViewChild} from '@angular/core';
import {MdbTablePaginationComponent, MdbTableService} from "../../projects/ng-uikit-pro-standard/src/lib/free/tables";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  elements: any = [];

  headElements = ['Despacho', 'Cliente', 'Tipo', 'Producto', 'Cantidad', 'Venta', 'Real'];

  @ViewChild(MdbTablePaginationComponent) mdbTablePagination: MdbTablePaginationComponent;
  firstItemIndex: any;
  lastItemIndex: any;
  maxVisibleItems = 5;
  constructor(private tableService: MdbTableService, private cdRef: ChangeDetectorRef) {
  }

  ngOnInit() {
    this.run(0);
  }

  run(index: number) {

    for (let i = 0; i <= index; i++) {
      this.elements.push({
        'despacho': 'despacho' + i,
        'tipo': 'tipo' + i,
        'producto': 'producto' + i,
        'catidad': 'catidad' + i,
        'venta': 'venta' + i,
        'real': 'real' + i,

      });
    }
    this.tableService.setDataSource(this.elements);
    this.elements = this.tableService.getDataSource();
  }

  ngAfterViewInit() {
    this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems);
    this.firstItemIndex = this.mdbTablePagination.firstItemIndex;
    this.lastItemIndex = this.mdbTablePagination.lastItemIndex;

    this.mdbTablePagination.calculateFirstItemIndex();
    this.mdbTablePagination.calculateLastItemIndex();
    this.cdRef.detectChanges();

    setTimeout(() => {
      this.run(3);
      console.log(this.elements);
    }, 5000);
  }

  onNextPageClick(data: any) {
    this.firstItemIndex = data.first;
    this.lastItemIndex = data.last;
  }

  onPreviousPageClick(data: any) {
    this.firstItemIndex = data.first;
    this.lastItemIndex = data.last;
  }

}

Best Regards,

Damian

Tks Damian,but that solution doesnt work for qtys lower than maxVisibleItems.(which is the original issue) Change this in your code... (send 2, instead 3) setTimeout(() => { this.run(2); console.log(this.elements); }, 5000);

That make table shows 4 records the first time (1 added in the OnInit and 3 added in this timeout) Then use a button to call the Run again ((click)="run(3);"), and pagination will come crazy.

Anyway if I return same or more qty than maxVisibleItems (5 in the example) It works fine.

Please help with that.

Dear carlosalviz,

I have to debug this problem on our end and make a fix, so I won't be able to send you a workaround for this situation, because changes have to be made on our side.

Please be patient, I'll let you know when this problem will be resolved.

Best Regards,

Damian

Hello! Need your help.

I've updated to the new version 7.5.0; and it's worst. All my reports stop working :(

Just tried to run the report with the issue of this ticket (which was going to be fixed on this release) and nothing happened. This is the error I get:

ERROR TypeError: Cannot read property 'getDataSource' of undefined
at MdbTablePaginationComponent.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.MdbTablePaginationComponent.calculateHowManyPagesShouldBe (ng-uikit-pro-standard.js:9337)
at MdbTablePaginationComponent.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.MdbTablePaginationComponent.checkIfNextShouldBeDisabled (ng-uikit-pro-standard.js:9415)
at Object.eval [as updateDirectives] (MdbTablePaginationComponent.html:17)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
at checkAndUpdateView (core.js:23307)
at callViewAction (core.js:23548)
at execComponentViewsAction (core.js:23490)
at checkAndUpdateView (core.js:23313)
at callViewAction (core.js:23548)
at execComponentViewsAction (core.js:23490)

Appreciate ur help.

Due to the latest problems in tables, we needed to make some breaking changes in the code in version 7.5.0 (https://mdbootstrap.com/docs/angular/changelog/#750). Please take a look at our updated documentation and update your code accordingly.

https://mdbootstrap.com/docs/angular/tables/pagination/

Tks, It-s almost ready. still failing with rows lower than the Max Visible Items.

The good news is that the error is only in the Front. Pagination anyway works fine.

Can you please review it? It still show pag like this: 1 - 5 of 3 When should be 1-3 of 3

Here my code (in comments, some of the Old code you sent me for the last version.. just in case that still can works)

First time it loads 1 record. (shows 1 - 1 of 1 ) which is fine Then hit the button and it adds 2 rows . (shows 1 - 5 of 3 ) Get confused with the max.

** Sorry, the import code tool, doesnt work fine! (everything loads weird)

HTML:

<button mdbBtn class="centrado" size="sm" type="button" rounded="true" gradient="purple" (click)="run(1);" mdbWavesEffect>
<i class="fa fa-search left"></i> Consultar

 <table mdbTable #tableEl="mdbTable" id="mdbTable" class="z-depth-1">
  <thead>
  <tr>
    <th *ngFor="let head of headElements; let i = index" aria-controls="mdbTable" scope="col" [mdbTableSort]="elements" [sortBy]="headElements[i]">
      {{head | titlecase}}
      <mdb-icon fas icon="sort"></mdb-icon>
    </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.despacho}}</th>
    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{el.cliente}}</td>
    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{el.tipo}}</td>
    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{el.producto}}</td>
    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{el.cantidad}}</td>
    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{el.venta}}</td>
    <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{el.real}}</td>
  </tr>
  </tbody>

  <tfoot class="grey lighten-5 w-100">

  <tr>
    <td colspan="7">
      <mdb-table-pagination [tableEl]="tableEl" [searchDataSource]="elements" >
      </mdb-table-pagination>
    </td>

  </tr>

  </tfoot>

</table>

TS:

import {ChangeDetectorRef, Component, ViewChild, OnInit, HostListener, AfterViewInit} from '@angular/core';

// import { IMyOptions, MdbTablePaginationComponent, MdbTableService } from 'ng-uikit-pro-standard'; import {MdbTablePaginationComponent, MdbTableDirective } from 'ng-uikit-pro-standard';

@Component({ selector: 'app-pag', templateUrl: './pag.component.html', styleUrls: ['./pag.component.css'] })

export class PagComponent implements OnInit, AfterViewInit { elements: any = []; previous: any = [];

headElements = ['despacho', 'cliente', 'tipo', 'producto', 'cantidad', 'venta', 'real'];

@ViewChild(MdbTablePaginationComponent) mdbTablePagination: MdbTablePaginationComponent; @ViewChild(MdbTableDirective) mdbTable: MdbTableDirective

firstItemIndex: any; lastItemIndex: any; maxVisibleItems = 5;

constructor(private cdRef: ChangeDetectorRef) { }

ngOnInit() { this.run(0); }

run(index: number) {

for (let i = 0; i <= index; i++) {
  this.elements.push({
    'despacho': 'despacho' + i,
    'cliente': 'cliente' + i,
    'tipo': 'tipo' + i,
    'producto': 'producto' + i,
    'cantidad': 'catidad' + i,
    'venta': 'venta' + i,
    'real': 'real' + i,

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

}

ngAfterViewInit() {

this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems);

this.mdbTablePagination.calculateFirstItemIndex();
this.mdbTablePagination.calculateLastItemIndex();
this.cdRef.detectChanges();
/* 
this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems);
this.firstItemIndex = this.mdbTablePagination.firstItemIndex;
this.lastItemIndex = this.mdbTablePagination.lastItemIndex;

this.mdbTablePagination.calculateFirstItemIndex();
this.mdbTablePagination.calculateLastItemIndex();
this.cdRef.detectChanges();

setTimeout(() => {
  this.run(2);
  console.log(this.elements);
}, 5000); */

} /* onNextPageClick(data: any) { this.firstItemIndex = data.first; this.lastItemIndex = data.last; }

onPreviousPageClick(data: any) { this.firstItemIndex = data.first; this.lastItemIndex = data.last; } */

}