javascript - Angular Datatables 和 Angular Material Table 组合

Question

我使用 Angular 6

我想做一个使用角度材料的用户友好方面和角度数据表（以及一般数据表）的便利性的表格。

它工作正常，但我想添加数据表中提供的单个列搜索。问题是我没有定义像 angular-datatbale 方式（使用 ajax 调用）这样的数据结构，所以我不能使用他们的方式：https ://l-lin.github.io/angular-datatables/#/advanced/单列过滤

这是我的做法：

我的 ts 文件：

    initDataTable() {
    console.log('initDataTables');
    const that = this;
    this.dtOptions = {
        pagingType: 'full_numbers',
        // pageLength: 2,
        serverSide: false, // si true, execute l'appel ajax à chaque utilisation d'un des filtres
        processing: true,
        deferRender: true,
        lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, 'Tous']],
        responsive: true,
        language: {
            lengthMenu: 'Afficher _MENU_ enregistrements par page',
            zeroRecords: 'Aucun contact disponible',
            info: '_START_ à _END_ sur un total de _TOTAL_ enregistrements',
            // info: ' Page _PAGE_ sur _PAGES_',
            infoEmpty: 'Aucun contact disponible',
            infoFiltered: '(filtré(s) sur _MAX_ enregistrements)',
            paginate: {
                first:      'Premier',
                last:       'dernier',
                next:       'Suivant',
                previous:   'Precedent'
            },
            search: '_INPUT_',
            searchPlaceholder: 'Recherche',

        },
        order: [[1, 'desc']],
        // Declare the use of the extension in the dom parameter
        dom: 'Blfrtip',
        stateSave: true,
        buttons: [
            // 'columnsToggle',
            // 'colvis',
            // 'copy',
            {
                extend: 'print',
                className: 'btn btn-info btn-round btn-fab btn-fab-mini',
                text: '<i class="material-icons" title="Imprimer">print</i>',
                exportOptions: {
                    columns: [1, 2, 3, 4]
                }
            },
            {
                extend: 'pdfHtml5',
                className: 'btn btn-danger btn-round btn-fab btn-fab-mini',
                text: '<i class="material-icons" title="Exporter au format pdf">save</i>',
                exportOptions: {
                    columns: [1, 2, 3, 4]
                }
            },
            {
                extend: 'excel',
                className: 'btn btn-success btn-round btn-fab btn-fab-mini',
                text: '<i class="material-icons" title="Exporter au format xls">save</i>',
                exportOptions: {
                    columns: [1, 2, 3, 4]
                }
            },
            {
                text: '<i class="material-icons" title="Supprimer">delete</i>',
                className: 'btn btn-danger btn-round btn-fab btn-fab-mini',
                action: function (e, dt, node, config) {
                    that.checkSelect(dt);
                }
            },
            {
                text: '<i class="material-icons" title="Actualiser">replay</i>',
                className: 'btn btn-primary btn-round btn-fab btn-fab-mini',
                action: function (e, dt, node, config) {
                    that.refresh();
                }
            },
            {
                text: '<i class="material-icons" title="Nouveau">add</i>',
                className: 'btn btn-warning btn-round btn-fab btn-fab-mini',
                action: function (e, dt, node, config) {
                    that.crudContact(null, 1);
                }
            }
        ]
    };
}

加载数据中 ：

getContacts() {
    const dtr: Contact[] = [];
    this.myJarviaServices.getAllContacts()
        .pipe(first())
        .subscribe(res => {
                this.contacts = res.content;
                console.log(res.content);
                this.contacts.forEach((item, index) => {
                    // dtr[index] = [];
                    dtr.push(item);
                });
                this.dataTable = {
                    headerRow: ['N°', 'Identifiant', 'Nom', 'Prénom'],
                    footerRow: ['N°', 'Identifiant', 'Nom', 'Prénom'],
                    dataRows: dtr
                };
                this.contactList = res.content;
                this.loading = false;
            },
            error => {
                console.log('error subscribe: ' + error);
                this.error(error);
            });
}

数据表模型：

import {Contact} from './contact';

export interface DataTable {
headerRow: string[];
footerRow: string[];
dataRows: Contact[];

}

我的 HTML 文件：

<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 style="width: 1%">
                <mat-checkbox (change)="$event ? masterToggle(dataTable.dataRows) : null"
                                                      [checked]="selection.hasValue() && isAllSelected(dataTable.dataRows.length)">
                </mat-checkbox>
             </th>
             <th>{{ dataTable.headerRow[0] }}</th>
             <th>{{ dataTable.headerRow[1] }}</th>
             <th>{{ dataTable.headerRow[2] }}</th>
             <th>{{ dataTable.headerRow[3] }}</th>
             <th class="disabled-sorting text-right">Action</th>
            </tr>
       </thead>
       <tfoot>
         <tr>
           <th>Sélection</th>
           <th>{{ dataTable.footerRow[0] }}</th>
           <th>{{ dataTable.footerRow[1] }}</th>
           <th>{{ dataTable.footerRow[2] }}</th>
           <th>{{ dataTable.footerRow[3] }}</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.idaicontact}}</td>
                <td>{{row.identifiant}}</td>
                <td>{{row.nom}}</td>
                <td>{{row.prenom}}</td>
                <td class="text-right">
                    <a (click)="crudContact(row, 2)" class="btn btn-link btn-success btn-just-icon"  matTooltip="Mettre à jour" [matTooltipPosition]="'left'">
                        <i class="material-icons">create</i>
                    </a>
                    <a (click)="crudContact(row, 4)" class="btn btn-link btn-danger btn-just-icon"  matTooltip="Supprimer" [matTooltipPosition]="'right'">
                      <i class="material-icons">delete</i>
                    </a>
                   <a (click)="crudContact(row, 5)" class="btn btn-link btn-info btn-just-icon"  matTooltip="Visualiser" [matTooltipPosition]="'left'">
                   <i class="material-icons">visibility</i>
                   </a>
                </td>
             </tr>
        </tbody>
    </table>

我找到了这种有角度的材料方式： https ://stackblitz.com/edit/angular-hbakxo-xctfqy?file=app%2Ftable-filtering-example.ts

但我不知道如何使其适应我的“混合”表......

是否可以应用单个列过滤？

标签： javascriptjqueryangularangular-materialangular-datatables