Question

我使用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>

不同种类的效果很好。该列表在屏幕上排序。我添加了将列表传递给另一个组件的函数（按钮）。问题是当我对列表进行排序并单击按钮时，该列表未针对其他组件进行排序。

如何检索已排序的列表？

* ** EDIT ：这是显示情况的图片：

带有新按钮的初始列表：

排序后：

Answer 1

这是解决方案：使用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);
            }
        }
      ]

它保留您使用的过滤器和排序

Angular 5-在排序标题后获取列表

1 个答案: