Pagination issue


Topic: Pagination issue

adanilson asked 5 years ago

Hello, iam try to implement the pagination but dont work, i install the pro version ng-uikit-pro-standard@7.4.4", iam tryin the exemple https://mdbootstrap.com/docs/angular/tables/pagination/ but in VS code say that "Property 'setDataSource' does not exist on type 'MdbTableDirective'.", i try to open the file and confirm taht dont have this property,

import { OnInit, Renderer2, ElementRef } from '@angular/core'; export declare class MdbTableDirective implements OnInit { private el; private renderer; striped: boolean; bordered: boolean; borderless: boolean; hover: boolean; small: boolean; responsive: boolean; stickyHeader: boolean; stickyHeaderBgColor: string; stickyHeaderTextColor: string; constructor(el: ElementRef, renderer: Renderer2); ngOnInit(): void; }


adanilson answered 5 years ago

Hi it work, thanks, but iam try to conver a datatable generic, do you have any idea ? my code is,...


Damian Gemza staff answered 5 years ago

Dear @adanilson

The method setDataSource is implemented in the MdbTableDirective class.

Please try to update your project to the latest version of MDB Angular Pro, and check, if this problem still exists.

Best Regards,

Damian


adanilson answered 5 years ago

How to update latest version of MDB Angular Pro? in my project ?


adanilson answered 5 years ago

**

  • my html

**

{{head.titulo}} Acções 0;else noResults"> {{item[list]}} --> = mdbTablePagination.firstItemIndex && i {{head.row == 'created_at' ? (item[head.row] | date: 'd/MM/yyyy HH:mm:ss') : (head.row == 'updated_at' ? (item[head.row] | date: 'd/MM/yyyy HH:mm:ss') : item[head.row] ) }} Editar Remover {{provin.id}} {{provin.nome}} {{provin.latitude}} {{provin.longitude}} {{provin.created_at | date: 'd/MM/yyyy HH:mm:ss'}} {{provin.updated_at | date: 'd/MM/yyyy HH:mm:ss' }} --> Sem resultados...

my ts

  • List item

import { Component, Input, OnInit, ElementRef, HostListener, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core'; import { Router } from '@angular/router'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { Subscription } from 'rxjs'; import { MdbTableDirective, MdbTablePaginationComponent, MdbTableService } from 'ng-uikit-pro-standard';

@Component({ selector: 'app-table', templateUrl: './table.component.html', styleUrls: ['./table.component.scss'] }) export class TableComponent implements OnInit, AfterViewInit {

// @Input('class-table') classTable = "mb-0 table-responsive"; // @Input('class-table-head') classTableHeade = "mdb-color darken-4 white-text" ; //@Input('delete-resource') deleteResource : Function; @Input('head-data') headData: any; @Input('data') data: any; @Input('url') url: string; //private subscriptions: Subscription []=[]; @ViewChild(MdbTablePaginationComponent) mdbTablePagination: MdbTablePaginationComponent; @ViewChild(MdbTableDirective) mdbTable: MdbTableDirective elements: any = []; previous: any = []; headElements = ['ID', 'First', 'Last', 'Handle']; constructor( private router: Router, private httpClient: HttpClient, private cdRef: ChangeDetectorRef ) { }

ngOnInit() { this.iniciarData();

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

}

iniciarData() { for(let head of this.headData) { //head.row this.headElements.push(head.row) }

for (let item of this.data) {
  for (let head of this.headData) {
    //item[head.row]
    this.elements.push( item[head.row]);
    //item[head.row]
  }

}

}

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

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

}

handlerDeleteResource(item) { const booleanConfirma = confirm("Deseja realmente excluir este item ?");

if (booleanConfirma) {
  const apiURL = `${this.url}/${item.id}`;

  this.httpClient.delete(apiURL).subscribe(() => {
    this.data = this.data.filter(element => element.id != item.id)

  },
    (err: HttpErrorResponse) => {
      //this.toasterService.showToaster('Error occurred. Details: ' + err.name + ' ' + err.message, 8000);
      () => alert("Erro ao tentar excluir !");
    }
  );


}

}

ngOnDestroy(): void { //Called once, before the instance is destroyed. //Add 'implements OnDestroy' to the class.

}

}


adanilson answered 5 years ago

is not showing,......


Damian Gemza staff commented 5 years ago

Dear @adanilson

Could you please describe, what do you want to achieve exactly? I don't know, what generic datatable is.

Without a better description, I won't be able to help you.

Best Regards,

Damian


adanilson commented 5 years ago

Sorry, i was try to create a component of table with pagination, that could reuse the same component in other part of code,...


Arkadiusz Idzikowski staff commented 5 years ago

Dear @adanilson

Please provide more information and update the formatting of the code you provided in the post above, because currently it's unreadable. We won't be able to help without any details.

Was the problem with 'setDataSource' resolved after version update?


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
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.4
  • Device: Mac Book
  • Browser: Chrome
  • OS: Mac IOS
  • Provided sample code: No
  • Provided link: Yes