MDB Angular Datatable vs MDB jQuery Datatable


Topic: MDB Angular Datatable vs MDB jQuery Datatable

Kloew asked 5 years ago

Expected behavior MDB Angular Datatable have full functions like MDB jQuery Datatable

Actual behavior

The MDB Angular Datatable have so much less funktionality then your jQuery Datatable.

  • I want the footer style like in der jQuery Datatable ** I need to change the Text ".... of..."

  • When I toggle the sort direction of the header I want so see the direction in the icon like in the jQuery Table

  • I Need the "Change page Size" drop down like in your jQuery Version

I am realy disappointed about your angular datatable, I can not understand why you have 2 total different implementations here...

Please find a solution for my problems because my customer wants to have these features.

https://mdbootstrap.com/docs/angular/tables/datatables/ https://mdbootstrap.com/docs/jquery/tables/datatables/

Resources (screenshots, code snippets etc.)


Konrad Stępień staff answered 5 years ago

Hi @Kloew,

There you can find more information about sort datatables:

https://mdbootstrap.com/docs/angular/tables/sort/

For example, you can switch icon on (sortEnd)="onSortEnd($event)" method.

If you will have problems, tell me about that. I will help you.

I Need the "Change page Size" drop down like in your jQuery Version

Can you tell me what element do you mean?

Also, you can send me part fo your code for refactoring and fix issues.

Best, Konrad.


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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.0.0
  • Device: pc
  • Browser: google chrome
  • OS: win10
  • Provided sample code: No
  • Provided link: Yes