title: Angular Datatables - reload data
body: <p>I use angular 6 with angular-datatables.</p>
  
  <p>I try to define a "rerender" button in order to reload data like this exemple :</p>
  
  <p><a href="https://l-lin.github.io/angular-datatables/#/advanced/rerender" rel="nofollow noreferrer">https://l-lin.github.io/angular-datatables/#/advanced/rerender</a></p>
  
  <p>My datatable is more complex than the one described in the exemple and I get an issue with individual columns filters use:</p>
  
  <p>This is my table before rerender action with filters use, all works fine:
  <a href="https://i.stack.imgur.com/8CMXN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8CMXN.png" alt="enter image description here"></a></p>
  
  <p>But when I use these filters after data are reloaded, this is the result :
  My non-visible column is now visible and page info are not updated..</p>
  
  <p><a href="https://i.stack.imgur.com/p3KfQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p3KfQ.png" alt="enter image description here"></a></p>
  
  <p>Here is my TS file :</p>
  
  <pre><code>// 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) =&gt; {
          // 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) =&gt; {
          dtInstance.columns().every(function () {
              $('input', this.footer()).val('').change();
          });
          // Destroy the table first
          dtInstance.destroy();
          // Call the dtTrigger to rerender again
          this.dtTrigger.next();
      });
  }
  </code></pre>
  
  <p>Here is my dtOptons config :</p>
  
  <pre><code>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) =&gt; {
              console.log('ContactsComponent - call Ajax()');
              that.selectedList = [];
              that.http.get&lt;ApiResponse&gt;('/api/contacts')
                  .subscribe(resp =&gt; {
                      that.contactList = resp.content;
                      that.loading = false;
                      callback({
                         data: that.contactList
                      });
                  },
                  error =&gt; {
                      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'&lt;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"&gt;';
                  }
              },
              {
                  targets: [4],
                  visible: true,
                  data: 'action',
                  render: function(data, type, full, meta) {
                   return '&lt;a class="btn btn-link btn-success btn-just-icon btn-edit" title="Editer"&gt;' +
                                 '&lt;i class="material-icons"&gt;create&lt;/i&gt;&lt;/a&gt;' +
                          '&lt;a class="btn btn-link btn-danger btn-just-icon btn-remove" title="Supprimer"&gt;' +
                                 '&lt;i class="material-icons"&gt;delete&lt;/i&gt;&lt;/a&gt;' +
                          '&lt;a class="btn btn-link btn-info btn-just-icon btn-read" title="Consulter"&gt;' +
                                '&lt;i class="material-icons"&gt;visibility&lt;/i&gt;&lt;/a&gt;'
                  }
              },
              {
                  targets: [5],
                  visible: false
              }
          ],
          rowCallback: (row: Node, data: any[] | Object, index: number) =&gt; {
              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', () =&gt; {
              const elt = $('td', row).find('[type="checkbox"]');
              if (elt) {
                  elt.unbind('click');
                  elt.bind('click', () =&gt; {
                      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) =&gt; {
                          console.log(item)
                      })
                  });
              }
              const eltedit = $('td', row).find('a.btn-edit');
              if (eltedit) {
                  eltedit.unbind('click');
                  eltedit.bind('click', () =&gt; {
                      console.log(data);
                      this.crudContact(data, 2);
                  });
              }
              const eltrem = $('td', row).find('a.btn-remove');
              if (eltrem) {
                  eltrem.unbind('click');
                  eltrem.bind('click', () =&gt; {
                      this.crudContact(data, 4);
                  });
              }
              const eltread = $('td', row).find('a.btn-read');
              if (eltread) {
                  eltread.unbind('click');
                  eltread.bind('click', () =&gt; {
                      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: '&lt;i class="material-icons" title="Imprimer"&gt;print&lt;/i&gt;',
                  exportOptions: {
                      columns: [1, 2, 3]
                  }
              },
              {
                  extend: 'pdfHtml5',
                  className: 'btn btn-danger btn-round btn-fab btn-fab-mini',
                  text: '&lt;i class="material-icons" title="Exporter au format pdf"&gt;save&lt;/i&gt;',
                  exportOptions: {
                      columns: [1, 2, 3]
                  }
              },
              {
                  extend: 'excel',
                  className: 'btn btn-success btn-round btn-fab btn-fab-mini',
                  text: '&lt;i class="material-icons" title="Exporter au format xls"&gt;save&lt;/i&gt;',
                  exportOptions: {
                      columns: [1, 2, 3]
                  }
              },
              {
                  text: '&lt;i class="material-icons" title="Supprimer"&gt;delete&lt;/i&gt;',
                  className: 'btn btn-danger btn-round btn-fab btn-fab-mini',
                  action: function (e, dt, node, config) {
                      that.checkSelect(dt);
                  }
              },
              // {
              //     text: '&lt;i class="material-icons" title="Actualiser"&gt;replay&lt;/i&gt;',
              //     className: 'btn btn-primary btn-round btn-fab btn-fab-mini',
              //     action: function (e, dt, node, config) {
              //         that.refresh();
              //     }
              // },
              {
                  text: '&lt;i class="material-icons" title="Nouveau"&gt;add&lt;/i&gt;',
                  className: 'btn btn-warning btn-round btn-fab btn-fab-mini',
                  action: function (e, dt, node, config) {
                      that.crudContact(null, 1);
                  }
              }
          ]
      };
  </code></pre>
  
  <p>Here is my HTML file :</p>
  
  <pre><code>&lt;table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%"&gt;
    &lt;!--&lt;table #dataTable class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%"&gt;--&gt;
    &lt;tfoot&gt;
      &lt;tr&gt;
        &lt;th&gt;Sélection&lt;/th&gt;
        &lt;!--&lt;th&gt;id&lt;/th&gt;--&gt;
        &lt;th&gt;&lt;input type="text" placeholder="Recherche Identifiant" name="search-identifiant"/&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input type="text" placeholder="Recherche Nom" name="search-nom"/&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input type="text" placeholder="Recherche prénom" name="search-prenom"/&gt;&lt;/th&gt;
        &lt;th&gt;Action&lt;/th&gt;
        &lt;th&gt;#&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/tfoot&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th style="width: 1%"&gt;
          &lt;mat-checkbox (change)="$event ? masterToggle() : null"
            [checked]="selection.hasValue() &amp;&amp; isAllSelected(contactList.length)"&gt;
          &lt;/mat-checkbox&gt;
        &lt;/th&gt;
        &lt;th&gt;&lt;b&gt;Identifiant&lt;/b&gt;&lt;/th&gt;
        &lt;th&gt;&lt;b&gt;Nom&lt;/b&gt;&lt;/th&gt;
        &lt;th&gt;&lt;b&gt;Prenom&lt;/b&gt;&lt;/th&gt;
        &lt;th&gt;&lt;b&gt;Action&lt;/b&gt;&lt;/th&gt;
        &lt;th&gt;&lt;b&gt;#&lt;/b&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>