Topic: Pagination issue
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; }
Hi it work, thanks, but iam try to conver a datatable generic, do you have any idea ? my code is,...
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
**
- 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.
}
}
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?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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