• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

155
Vistas
How to show pagination in thingsboard custom widget table?

I developed a widget where I display some data using the angular material table. The data is quite large and users need to scroll for a long time to see all the data. I want to show a pagination so that it will help users to see the data by clicking on the pagination link.

Here is my HTML code:

<mat-table [dataSource]="tableData" id="reportTable" style="background-color:inherit;">
    <ng-container *ngFor="let column of tableMeta" [matColumnDef]="column.key">
        <mat-header-cell *matHeaderCellDef [style.background-color]="settings?.tableHeaderBgColor" [style.color]="settings?.tableHeaderTxtColor">{{column.title}}
        </mat-header-cell>
        <mat-cell *matCellDef="let element" style="color:inherit;"> {{element[column.key]}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns" [style.background-color]="settings?.tableHeaderBgColor"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Here is the JavaScript:

let $scope = self.ctx.$scope;
$scope.tableMeta=[{'title':'Date', 'key':'date'},{'title':'Online', 'key':'online'}, {'title':'Running', 'key': 'running'}, {'title':'Stopped', 'key': 'stopped'}, {'title':'Offline', 'key': 'offline'}];
$scope.displayedColumns=['date', 'online', 'running', 'stopped', 'offline'];
$scope.tableData=[] //Here will be the dataset.

Is there anyone who knows how to add functional pagination?

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Something like this. Slice part of the data to dataSource and add the pagination element:

<mat-table
    [dataSource]="tableData.slice(tablePagination.getFrom(), tablePagination.getTo())"
    id="reportTable"
    style="background-color:inherit;"
>
    ...
    ...
</mat-table>
<mat-paginator
    [length]="tableData.length"
    [pageSize]="tablePagination.pageSize"
    [pageSizeOptions]="tablePagination.pageSizeOptions"
    (page)="tablePagination.handler($event)"
    aria-label="Select page"
    showFirstLastButtons="true"
></mat-paginator>

In your JS, set data, settings and the page handler:

self.onInit = () => {
    const tableData = [] // Your data
    const tablePagination = {
        pageIndex: 0,
        pageSize: 25,
        pageSizeOptions: [25, 50, 100],
        handler: (pagination) => {
            const { pageIndex, pageSize } = pagination;
            if (pageSize !== undefined) {
                tablePagination.pageSize = pageSize;
            }
            if (pageIndex !== undefined) {
                tablePagination.pageIndex = pageIndex;
            }
        },
        getFrom: () => {
            const { pageIndex, pageSize } = tablePagination;
            return pageIndex * pageSize;
        },
        getTo: () => {
            const { pageIndex, pageSize } = tablePagination;
            return pageIndex * pageSize + pageSize;
        }
    }

    const { $scope } = self.ctx
    $scope.tableData = tableData
    $scope.tablePagination = tablePagination
}
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda