Angular 5 - get list after sort header

Question

I use Angular 5, Angular Material and Angular DataTable. I have following table

HTML file :

<div class="material-datatables table-responsive">
              <table id="example" datatable [dtOptions]="dtOptions" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                <thead>
                <tr>
                  <th><mat-checkbox (change)="$event ? masterToggle(dataTable.dataRows) : null"
                                    [checked]="selection.hasValue() && isAllSelected(dataTable.dataRows.length)"
                                    [indeterminate]="selection.hasValue() && !isAllSelected(dataTable.dataRows.length)">
                  </mat-checkbox></th>
                  <th>{{ dataTable.headerRow[1] }}</th>
                  <th>{{ dataTable.headerRow[2] }}</th>
                  <th class="disabled-sorting text-right">Action</th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                  <th>{{ dataTable.footerRow[0] }}</th>
                  <th>{{ dataTable.footerRow[1] }}</th>
                  <th>{{ dataTable.footerRow[2] }}</th>
                  <th class="text-right">Action</th>
                </tr>
                </tfoot>
                <tbody>
                <tr *ngFor="let row of dataTable.dataRows">
                  <td><mat-checkbox (click)="$event.stopPropagation()"
                                     (change)="$event ? selection.toggle(row) : null"
                                     [checked]="selection.isSelected(row)">
                  </mat-checkbox>
                  </td>
                  <td>{{row[0]}}</td>
                  <td>{{row[1]}}</td>
                  <td class="text-right">
                    <button (click)="openIndex(row)" class="btn btn-simple btn-info btn-icon"  matTooltip="Indexer" [matTooltipPosition]="'left'">
                      <i class="material-icons">assignment</i>
                    </button>
                    <button (click)="onSubmitDel(row)" class="btn btn-simple btn-danger btn-icon"  matTooltip="Supprimer" [matTooltipPosition]="'right'">
                      <i class="material-icons">delete</i>
                    </button>
                  </td>
                </tr>
                </tbody>
              </table>

The different sorts work nice. The list is sorted on the screen. I add function (button) that pass the list to another component. The problem is when I sort the list and I click on button, the list is not sorted for this other component.

How can I retrieve the sorted list ?

* **EDIT: this is image to show the case :

Initial list with new button :

After sorting:

score 0 · Answer 1 · answered Sep 13 '18 at 07:00

This is solution : use dt.buttons.exportData().body

in dtOptions : add the following lines:

 buttons: [
        'print',
        'pdf',
        'excel',
        {
          text: 'Sélection',
          className: 'btn btn-success',
          action: function (e, dt, node, config) {
                console.log(dt.buttons.exportData().body);
            }
        }
      ]

It keeps filters and sorts you use

Angular 5 - get list after sort header

1 Answers1