从Angular 6的数据表中重新加载数据

时间:2019-05-03 07:55:27

标签: angular typescript datatable

我正在开发应用程序,我想知道如何从应用程序中的数据表中重新加载数据。我在Angular 6中使用了数据表。第一次加载数据表是正确的,但我想使用自定义过滤器过滤数据表,当我单击按钮validate时,我想从另一种方法重新装载数据。

this.dtOptionsLog = {
  ajax: (dataTablesParameters: any, callback) => {
    that.adminServices.loadingLogData(this.logInfo)
      .subscribe((webScriptdata) => {
          console.log('AdminComponent - log information');
          success = webScriptdata;
          this.loading = false;
          callback({
            data: [] = success.content as string[]
          });
        },
        msg => {
          console.log(msg);
        });
  },
  pagingType: 'full_numbers',
  lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'Tous']],
  responsive: true,
  language: {
    lengthMenu: 'Afficher _MENU_ enregistrements par page',
    zeroRecords: 'Aucune tâche disponible',
    info: 'Page _PAGE_ sur _PAGES_',
    infoEmpty: 'Aucun log disponible',
    infoFiltered: '(filtré(s) sur _MAX_ enregistrements)',
    paginate: {
      first:      'Premier',
      last:       'dernier',
      next:       'Suivant',
      previous:   'Precedent'
    },
    search: '_INPUT_',
    searchPlaceholder: 'Recherche',
  },
  columns: [{
    title: 'Utilisateur',
    data: 'username',
  },
    {
      title: 'Message',
      data: 'message',
    },
    {
      title: 'Date',
      data: 'datelog',
    }],
  stateSave: true,
  order: [[2, 'desc']],
  columnDefs: [
    {
      targets: [1],
      searchable: false,
      visible: true,
      render: function(data, type, full, meta) {
        console.log(full);
        return full.node !== null ? '<a class="btn btn-simple btn-info" title="Visualiser le document">' + full.message + '</a>'
          : full.message;
      }
    }
  ],
  // cette fonction permet d'afficher la fonction pour visualiser les fichiers documents à partir d'un bouton
  rowCallback: (row: Node, data: LogData, index: number) => {
    const eltedit = $('td', row).find('a.btn-info');
    if (eltedit) {
      eltedit.unbind('click');
      eltedit.bind('click', () => {
        console.log(data);
        this.openIndex(data.node);
      });
      return row;
    }
  }
};

和我的函数validSearch():

validSearch() {
console.log('Filtre Validation');
if (this.dateFin !== undefined && this.dateFin > this.dateDebut) {
  // méthode qui permettra de filtrer les logs sur une période
} else if (this.dateFin === undefined) {
  // méthode qui permet de filtrer sur certains attributs mais ceci est géré du côté java en fonction des attributs selectionnés
  this.logInfo = {} as LogData;
  this.logInfo.username = this.selected1;
  this.logInfo.typeaction = this.selected2;
  this.logInfo.datelog = this.dateDebut.toDateString();
  console.log(this.logInfo);
  let success;
  const that = this;
  this.dtOptionsLog.sAjaxSource = {
    ajax: (dataTablesParameters: any, callback) => {
      that.adminServices.loadingLogData(this.logInfo)
        .subscribe((webScriptdata) => {
            console.log('AdminComponent - log information');
            success = webScriptdata;
            this.loading = false;
            callback({
              data: [] = success.content as string[]
            });
          },
          msg => {
            console.log(msg);
          });
    }
  };
} else {
  alert('Il faut que la date de fin soit supérieure à la date de début pour déterminer une période');
}

}

0 个答案:

没有答案