How to change title and messageTop after initialization

amineharbaoui

Hi, I want to change the title and the messageTop after initialization of my datatable, Is there a way to do that ?

allan

You can give messageTop as a function so your function would evaluate to a different result - e.g.:

messageTop: function () {
  return myVariable; // where `myVariable` is accessible in this scope and set somewhere else
}

Allan

amineharbaoui

Thanks for your reply, but the function called only in the initialization, when I change myVariable after nothing change

allan

It appears to work as expected for me here: http://live.datatables.net/zileloso/1/edit .

Can you link to a test case showing the issue please.

Allan

amineharbaoui

So In my case I initialize my datatable first like you said I called a function in the messageTop and I called initDataTable first, this mean that the messageTop will display the default value, but I have function that triggered by clicking on some button and this function change the value of the variable returned by the fucntion called in the initialization, but with this approach nothing change I always get only the default value.

PS: I use DataTables in an Angular project version 6+

ngOnInit() {
    this.initDataTable();
  }

initDataTable() {
    this.table = $('#presenceTable');
    this.dataTable = this.table.dataTable({
      autoWidth: false,
      searching: true,
      retrieve: true,
      ordering: true,
      destroy: true,
      pageLength: 50,
      data: null,
      columns: [
        {'data': 'name'},
        {'data': 'before'},
        {'data': 'after'},
      ],
      dom: '<"dt-buttons"Bf><"clear">lrtp',
      buttons: [{
        extend: 'print',
        text: 'Imprimer ce tableau',
        title: 'Compte rendu ' + this.selectedDate + '  M. Pellegrino',
        messageTop: this.chnageDataTableMessageTop(),
        autoPrint: true,
        customize: function (win) {
          $(win.document.body)
            .css('font-size', '10pt');

          $(win.document.body).find('table')
            .addClass('compact')
            .css('font-size', 'inherit');
        }
      }],
      language: {'url': '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json'}
    });
  }

chnageDataTableMessageTop() {
    return '<h2 style=\'float: right\'>' + this.numberOfStudentPresent + '/' + this.numberOfStudent + ' élèves detecté  </h2>';
  }

  displayPresences() {
    this.show = true;

    this.presencesService.getPresences('presence', this.selectedDate).subscribe(response => {
      if (response.status_code === 200 && response.presences !== undefined && response.presences !== null) {
        this.numberOfStudent = response.presences.length;
        this.numberOfStudentPresent = response.presences.filter(p => p).length;

        this.table.DataTable().clear();
        this.table.DataTable().rows.add(response.presences).draw();

      }
    });
  }