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
