Angular 角度数据表-重新加载数据

我使用angular 6和angular数据表

我尝试定义一个“重新加载”按钮，以便像下面的示例一样重新加载数据：

我的datatable比示例中描述的更复杂，并且我遇到了过滤器使用的单个列的问题：

这是我的表，在重新加载操作之前使用过滤器，所有工作正常：

但当我在数据重新加载后使用这些过滤器时，结果是： 我的不可见列现在可见，页面信息不会更新

这是我的TS文件：

// Lifecycle hook that is called after a component's view has been fully initialized
ngAfterViewInit() {
    console.log('ContactsComponent - ngAfterViewInit()');
    this.dtTrigger.next();
    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // console.log(dtInstance);
        // console.log(dtInstance.data());
        dtInstance.columns().every(function () {
            const that = this;
            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this['value']) {
                    that.search(this['value'])
                        .draw();
                }
            });
        });
    });

}
ngOnDestroy(): void {
    console.log('ngDestroy');
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();
}
rerender(): void {
    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.columns().every(function () {
            $('input', this.footer()).val('').change();
        });
        // Destroy the table first
        dtInstance.destroy();
        // Call the dtTrigger to rerender again
        this.dtTrigger.next();
    });
}

这是我的dtOptons配置：

this.dtOptions = {
        pagingType: 'full_numbers',
        // displayLength: 10,
        // serverSide: true, // si true, execute l'appel ajax, puis l'exécute à chaque utilisation d'un des filtres
        // processing: true,
        ajax: (dataTablesParameters: any, callback) => {
            console.log('ContactsComponent - call Ajax()');
            that.selectedList = [];
            that.http.get<ApiResponse>('/api/contacts')
                .subscribe(resp => {
                    that.contactList = resp.content;
                    that.loading = false;
                    callback({
                       data: that.contactList
                    });
                },
                error => {
                    console.log('authService.login error' + error);
                        console.log('error status : ' + error.status);
                    this.myJarviaServices.showNotification('top', 'center', error,
                        'danger', 1000);
                    this.alertService.error(error);
                });
        },
        // deferRender: true,
        columns: [
            {
                // title: 'Selection',
                data: null },
            {
                // title: 'Identifiant',
                data: 'identifiant' } ,
            {
                // title: 'Nom',
                data: 'nom' },
            {
                // title: 'Prénom',
                data: 'prenom' }
            ,
            {
                // title: 'Action',
                data: null },
            {
                // title: 'Action',
                data: 'idaicontact'}
        ],
        columnDefs: [
            {
                orderable: false,
                // className: 'my_class', // classname définit une checkbox par dessus une case vide [object Object] (data: null)
                targets: [0],
                render: function(data, type, full, meta) {
                    return'<input type="checkbox" class="unique-class mat-checkbox mat-accent mat-checkbox-anim-checked-unchecked ' +
                        'mat-checkbox-inner-container mat-checkbox-inner-container-no-side-margin">';
                }
            },
            {
                targets: [4],
                visible: true,
                data: 'action',
                render: function(data, type, full, meta) {
                 return '<a class="btn btn-link btn-success btn-just-icon btn-edit" title="Editer">' +
                               '<i class="material-icons">create</i></a>' +
                        '<a class="btn btn-link btn-danger btn-just-icon btn-remove" title="Supprimer">' +
                               '<i class="material-icons">delete</i></a>' +
                        '<a class="btn btn-link btn-info btn-just-icon btn-read" title="Consulter">' +
                              '<i class="material-icons">visibility</i></a>'
                }
            },
            {
                targets: [5],
                visible: false
            }
        ],
        rowCallback: (row: Node, data: any[] | Object, index: number) => {
            const self = this;
            // Unbind first in order to avoid any duplicate handler
            // (see https://github.com/l-lin/angular-datatables/issues/87)
            // $('td:first-child', row).unbind('click');
            // $('td:first-child', row).bind('click', () => {
            const elt = $('td', row).find('[type="checkbox"]');
            if (elt) {
                elt.unbind('click');
                elt.bind('click', () => {
                    if (elt[0].checked) {
                        that.selectedList.push(data as Contact)
                    } else {
                        const itemIndex = this.selectedList.indexOf(data as Contact);
                        that.selectedList.splice(itemIndex, 1);
                    }
                    console.log(that.selectedList.length + ' éléments sélectionés');
                    this.selectedList.forEach((item) => {
                        console.log(item)
                    })
                });
            }
            const eltedit = $('td', row).find('a.btn-edit');
            if (eltedit) {
                eltedit.unbind('click');
                eltedit.bind('click', () => {
                    console.log(data);
                    this.crudContact(data, 2);
                });
            }
            const eltrem = $('td', row).find('a.btn-remove');
            if (eltrem) {
                eltrem.unbind('click');
                eltrem.bind('click', () => {
                    this.crudContact(data, 4);
                });
            }
            const eltread = $('td', row).find('a.btn-read');
            if (eltread) {
                eltread.unbind('click');
                eltread.bind('click', () => {
                    this.crudContact(data, 5);
                });
            }
            return row;
        },
        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: [
            {
                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]
                }
            },
            {
                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]
                }
            },
            {
                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]
                }
            },
            {
                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);
                }
            }
        ]
    };

this.dtOptions={
pagingType:“完整编号”，
//显示长度：10，
//服务器端：true，//si true，执行l'appel ajax，puis l'exécuteáchaque使用过滤器
//处理：对，
ajax：（dataTablesParameters:any，callback）=>{
log（'ContactsComponent-call Ajax（）'）；
that.selectedList=[]；
get（'/api/contacts'））
.订阅（resp=>{
即：contactList=resp.content；
加载=错误；
回拨({
数据：那是联系人列表
});
},
错误=>{
console.log（'authService.login error'+error）；
console.log（'error status:'+error.status）；
this.myJarviaServices.showNotification（'top'，'center'，error，
“危险”，1000）；
this.alertService.error（错误）；
});
},
//是的，
栏目：[
{
//标题:"精选",，
数据：null}，
{
//标题：“身份证明人”，
数据：'标识'}，
{
//标题：“名称”，
数据：'nom'}，
{
//标题：“Prénom”，
数据：'prenom'}
,
{
//标题：“行动”，
数据：null}，
{
//标题：“行动”，
数据：'idaicontact'}
],
columnDefs：[
{
可订购：错误，
//类名：“MyoCype”，//类名D D Funt UNE复选框PAR DISSUS UNE CASE VID[Object Object ]（数据：NULL）
目标：[0]，
呈现：函数（数据、类型、完整、元）{
返回“”；
}
},
{
目标：[4]，
可见：对，
数据：“行动”，
呈现：函数（数据、类型、完整、元）{
返回“”+
“创建”+
'' +
“删除”+
'' +
“可见性”
}
},
{
目标：[5]，
可见：假
}
],
rowCallback：（行：节点，数据：任意[]|对象，索引：编号）=>{
const self=这个；
//首先解除绑定以避免任何重复的处理程序
//（见https://github.com/l-lin/angular-datatables/issues/87)
//$（'td:first child'，第行）。取消绑定（'click'）；
//$（'td:first child'，row）.bind（'click'，（）=>{
常量elt=$（'td'，row）.find（'[type=“checkbox”]'）；
国际单项体育联合会（英语教学）{
elt.unbind（'click'）；
elt.bind（'点击'，（）=>{
如果（elt[0]。已选中）{
that.selectedList.push（数据作为联系人）
}否则{
const itemIndex=this.selectedList.indexOf（数据作为联系人）；
即.selectedList.splice（itemIndex，1）；
}
log（that.selectedList.length+'element séselectionés'）；
this.selectedList.forEach（（项）=>{
console.log（项目）
})
});
}
常量eltedit=$（'td'，行）.find（'a.btn-edit'）；
如果（编辑）{
eltedit.unbind（'click'）；
elEdit.bind（'单击'，（）=>{
控制台日志（数据）；
这是一个粗糙的接触（数据，2）；
});
}
常量eltrem=$（'td'，row）.find（'a.btn-remove'）；
if（eltrem）{
解除绑定（“单击”）；
eltrem.bind（'单击'，（）=>{
这是一个粗糙的接触（数据，4）；
});
}
常量eltread=$（'td'，row.find（'a.btn-read'）；
如果（阅读）{
eltread.unbind（'click'）；
eltread.bind（'单击'，（）=>{
这是一个粗糙的接触（数据，5）；
});
}
返回行；
},
长度菜单：[[5,10,25,50，-1]，[5,10,25,50，'Tous']，
回答：是的，
语言：{
长度菜单：“AffigHer-MunuieEnrasePar页面”，
zeroRecords:“Aucun联系人可争议”，
信息：“‘开始’和‘结束’在登记总数之外”，
//信息：“第页，共页，共页”，
infoEmpty:“Aucun联系人可争议”，
信息过滤：‘（过滤区位于最高登记区）’，
分页：{
第一:"总理",，
最后一句：“德尼尔”，
下一个：“Suivant”，
上一篇：“先例”
},
搜索：'\u输入'，
搜索占位符：“Recherche”，
},
订单：[[1，'说明']]，
//在dom参数中声明扩展的使用
dom:'Blfrtip'，
stateSave：没错，
按钮：[
{
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
  <!--<table #dataTable class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">-->
  <tfoot>
    <tr>
      <th>Sélection</th>
      <!--<th>id</th>-->
      <th><input type="text" placeholder="Recherche Identifiant" name="search-identifiant"/></th>
      <th><input type="text" placeholder="Recherche Nom" name="search-nom"/></th>
      <th><input type="text" placeholder="Recherche prénom" name="search-prenom"/></th>
      <th>Action</th>
      <th>#</th>
    </tr>
  </tfoot>
  <thead>
    <tr>
      <th style="width: 1%">
        <mat-checkbox (change)="$event ? masterToggle() : null"
          [checked]="selection.hasValue() && isAllSelected(contactList.length)">
        </mat-checkbox>
      </th>
      <th><b>Identifiant</b></th>
      <th><b>Nom</b></th>
      <th><b>Prenom</b></th>
      <th><b>Action</b></th>
      <th><b>#</b></th>
    </tr>
  </thead>
</table>

afterView() {
        this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
            // console.log(dtInstance);
            // console.log(dtInstance.data());
            dtInstance.columns().every(function () {
                const that = this;
                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this['value']) {
                        that.search(this['value'])
                            .draw();
                    }
                });
            });
            // dtInstance.on('search.dt', function() {
            //     // Do you stuff
            //     console.log('search: ' + dtInstance.search());
            // });
        });
    }

 ngAfterViewInit() {
    console.log('ContactsComponent - ngAfterViewInit()');
    this.dtTrigger.next();
    this.afterView();

}

 ajax: (dataTablesParameters: any, callback) => {
            console.log('ContactsComponent - call Ajax()');
            that.selectedList = [];
            that.http.get<ApiResponse>('/api/contacts')
                .subscribe(resp => {
                        that.contactList = resp.content;
                        that.loading = false;
                        // on charge la table telle qu'elle était avant le reloading (filtres éventuels)
                        this.afterView();
                        callback({
                            data: that.contactList
                        });
                    },
                    error => {
                        console.log('authService.login error' + error);
                        console.log('error status : ' + error.status);
                        this.alertService.error(error);
                        this.myJarviaServices.error(error);
                    });
        },