MDB Angular Datatable vs MDB jQuery Datatable

Kloew commented 5 years ago

1. I can to style the fotter of the angular Datatable: so it looks like the jQuery Datatable <mdb-table-pagination [tableEl]="tableEl" paginationAlign="" [searchDataSource]="elements"></mdb-table-pagination>

2. Can you pls give my an example to use sortEnd, for each column to show the correct sorting direction in icon, in jQuery Datatable this works out of the box, dont understand why in agnular I have to implement this function for my own.

3. In jQuery Datatable there is an automatic pageSize Chaning DropDown, can you pls give me here also an angular implementation of this base implementation for angular

Konrad Stępień staff commented 5 years ago

1) https://mdbootstrap.com/docs/angular/components/pagination/ can you visit this page?

2) Try my code:

      <table id="tableSortExample" mdbTable class="z-depth-1">
    <thead>
    <tr>
      <th *ngFor="let head of headElements; let i = index" aria-controls="tableSortExample" scope="col"
          [mdbTableSort]="elements" [sortBy]="headElements[i]" (sorted)="onSort($event)" (click)="addClass($event)">{{head | titlecase}}
        <mdb-icon fas [icon]="sort"></mdb-icon>
      </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let el of elements; let i = index">
      <th scope="row">{{el.id}}</th>
      <td>{{el.first}}</td>
      <td>{{el.last}}</td>
      <td>{{el.handle}}</td>
    </tr>
    </tbody>

TS:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  sort = '';
  elements: any = [];
  headElements = ['id', 'first', 'last', 'handle'];

  ngOnInit() {
    for (let i = 1; i <= 15; i++) {
      this.elements.push({ id: i, first: 'User ' + i, last: 'Name ' + i, handle: 'Handle ' + i });
    }
  }

  onSort(event: any) {
    console.log(event);
    if (event.sortOrder === 'descending') {
      this.sort = 'sort-down';
    } else {
      this.sort = 'sort-up';
    }
  }

  addClass(event: any) {
    const th = Array.from(document.querySelectorAll('th'));
    th.map((el: any) => el.classList.remove('active'));

    event.target.classList.add('active');
  }
}

SCSS

th mdb-icon {
  display: none;
}

th.active mdb-icon {
  display: unset;
}

3) Do you mean to change this property this.mdbTablePagination.setMaxVisibleItemsNumberTo(5);` with dropdown?

Kloew commented 5 years ago

Thank you, 2 and 3 works great!

Only 1 (paging) do not work.

Do you have a code snippet to create dynamic paging with datatablesource like static html explained in https://mdbootstrap.com/docs/angular/components/pagination/

Konrad Stępień staff commented 5 years ago

Hi @Kloew,

Sorry, but for this time we don't have any snippets for change pagination.

Also, you can try to add own custom styles in your styles.scss file to change displaying pagination in your tables.