05-15-2021 09:16 AM
Hi,
I need make pagination for dataTable component. I found this Custom pagination documentation, but I dont undestand how to implement it. Is there any implementation example?
I have a ObjectDataTableAdapter in which I pull JSON data from my Alfresco webscript to datatable component.
HTML file
<adf-toolbar title="Toolbar"> <button mat-icon-button (click)="bulkAction()"> <mat-icon>repeat</mat-icon> </button> </adf-toolbar> <adf-datatable [data]="data" [multiselect]="true" [actions]="true" (showRowActionsMenu)="onShowRowActionsMenu($event)" (executeRowAction)="onExecuteRowAction($event)"> <adf-no-content-template> <ng-template> <h1>Kde nic, tu nic.</h1> </ng-template> </adf-no-content-template> </adf-datatable> <!-- <adf-pagination [target]="data" [pagination]="5" [supportedPageSizes]="[5, 10, 15, 20]"> </adf-pagination> -->
TS file
import { Component, OnInit } from '@angular/core'; import { ObjectDataTableAdapter } from '@alfresco/adf-core'; import { DataCellEvent, DataRowActionEvent } from '@alfresco/adf-core'; import { AlfrescoApiService } from "@alfresco/adf-core"; @Component({ selector: 'aca-my-first-view', templateUrl: './my-first-view.component.html', styleUrls: ['./my-first-view.component.scss'] }) export class MyFirstViewComponent implements OnInit { scriptPath: string = 'sample/folder/Company%20Home'; ecmHost: string; data: ObjectDataTableAdapter; isLoading = false; constructor( private alfrescoApi: AlfrescoApiService ) { this.data = new ObjectDataTableAdapter( // data [], // columns [] ); } ngOnInit(): void { console.log("tady"); //console.log(this.getJSONByFTS()); this.getJSONByFTS().then(result => { var string = result as string; let jsonArray = string.slice(1, -1).split(", "); console.log("jsonArray: " + jsonArray); let finalData = Array<any>(); jsonArray.forEach(element => { console.log("element: " + element) let json = JSON.parse(element); console.log("json: " + json) finalData.push(json); }); console.log("finalData: " + finalData); //Data this.data = new ObjectDataTableAdapter(finalData, // columns [ { type: 'text', key: 'nodeRef', title: 'Id', sortable: true }, { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width', sortable: true } ]); }).catch(error => { console.log(error); }) } public getJSONByFTS(): Promise<any> { return this.alfrescoApi.getInstance().webScript.executeWebScript('GET', 'jsonByFTS'); } bulkAction() { for (let row of this.data.getRows()) { if (row.isSelected == true) { console.log(row.getValue("nodeRef")); } } } onShowRowActionsMenu(event: DataCellEvent) { let myAction = { title: 'Zobraz nodeRef' // your custom metadata needed for onExecuteRowAction }; event.value.actions = [ myAction ]; } onExecuteRowAction(event: DataRowActionEvent) { let args = event.value; let jeZaskrtle = args.row.isSelected; alert("jeZaskrtle: " + jeZaskrtle); console.log(args.row); console.log(args.action); window.alert(`NodeRef: ${args.row.getValue("nodeRef")}`); //získání NodeRefu z akce na řádku console.log(args.row.getValue("nodeRef")); } logDataExample(event) { console.log('Your webscript data is here' + event); } }
Thanks
Explore our Alfresco products with the links below. Use labels to filter content by product module.