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

问题描述 投票:0回答:1

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

sorting html-table angular5 angular-datatables angular-material-5
1个回答
0
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.