Angular 5 - получить список после сортировки заголовка - PullRequest
Новая
       22

Angular 5 - получить список после сортировки заголовка

0 голосов
/ 11 сентября 2018

Я использую Angular 5, Angular Material и Angular DataTable.У меня есть следующая таблица

HTML-файл: 

<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>

Различные виды работают хорошо.Список отсортирован на экране.Я добавляю функцию (кнопку), которая передает список другому компоненту.Проблема заключается в том, что когда я сортирую список и нажимаю кнопку, список не сортируется для этого другого компонента.

Как получить отсортированный список?

* **РЕДАКТИРОВАТЬ : это изображение для отображения дела:

Начальный список с новой кнопкой: enter image description here

После сортировки: enter image description here

1 Ответ

0 голосов
/ 13 сентября 2018

Это решение: используйте dt.buttons.exportData (). Body

в dtOptions: добавьте следующие строки: 

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

Сохраняет используемые вами фильтры и сортировки

...