Answers

• allan Posts: 63,116Questions: 1Answers: 10,397 Site admin

  July 2023

  Excel export needs JSZip and PDF export needs pdfmake (i.e. two additional external libraries). Also remove the buttons.flash.js - that's no longer supported.

  Since you are using Vue, you might want to consider using our Vue component for DataTables.

  Here is an example of our Vue component used with export buttons.

  Allan
• denisPF Posts: 13Questions: 3Answers: 0

  July 2023

  Hi Allan,

  Thanks for the tips but I wouldn't want to use a new component just the ones that already exist and are even more common. Besides, I'm already importing these two components in my code:

  import "jszip/dist/jszip.js";
  import "pdfmake/build/pdfmake.js";
  

  I already removed the flash.js component but still no button is showing on the screen.

  regards,

  Adenilson
• denisPF Posts: 13Questions: 3Answers: 0

  July 2023

  I forgot to mention that I'm using axios, as per the code snippet below, to fetch the data via web services:

  static client = axios.create({
          baseURL: process.env.VUE_APP_SWS_BASE_URL
      });
  
  
  ...
  let data = await SwsApplication.pcdsDadosRecentes(params.rede, params.uf, params.codibge,params.tipoestacao, params.codestacao, params.sensor); 
  
• allan Posts: 63,116Questions: 1Answers: 10,397 Site admin

  July 2023

  I'll need a test case showing the issue in that case please. Did you add:

  DataTablesLib.Buttons.jszip(jszip);
  DataTablesLib.Buttons.pdfMake(pdfmake);
  

  like in the example I linked to? That isn't specific to our Vue component. DataTablesLib there is the datatables.net import.

  Allan
• denisPF Posts: 13Questions: 3Answers: 0

  July 2023

  Hi again Allan,

  I think it was to be easier to include these buttons in the code but it isn't...
  I left it exactly like your example including the imports but the error below is appearing:

  buttons.html5.mjs:29 Uncaught TypeError: Cannot set properties of undefined (setting 'pdfMake')
  

  and the snippet that initializes the table and inserts the buttons looks like this:

  
  $('#tb_dadosrecentes').DataTable({
                      data: data,
                      language: {
                          emptyTable: 'Nenhum resultado foi encontrado para essa requisição.',
                      },
                      destroy: true,
                      paging: true,
                      searching: true,
                      processing: true,
                      select: true,
                      dom: 'Bftip',
                      //buttons: ['copy', 'csv', 'pdf', 'excel', 'print'],
                      columnDefs: [
                          {
                              targets: '_all',
                              defaultContent: '-',
                              className: 'dt-body-left'
                          }
                      ],
  .
  .
  .
  

  Strange because the approach proposed in the post https://datatables.net/extensions/buttons/examples/initialisation/simple.html below isn't working either.

  Could someone help me on this?

  Att,
  Adenilson
• tangerine Posts: 3,365Questions: 39Answers: 395

  July 2023

  Allan asked you to provide a test case.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
• allan Posts: 63,116Questions: 1Answers: 10,397 Site admin

  July 2023

  The example in the page you linked to is just using UMD loaders to bring the libraries in globally. However, Vue generally doesn't work that way, which is why I created a DataTables specific Vue extension.

  As tangerine notes, I'd really need a test case to be able to debug this, as there are so many possibilities for what is going wrong.

  Allan
• denisPF Posts: 13Questions: 3Answers: 0

  July 2023

  Hi Tangerines,

  I don't know how to provide a test case because my vue 3 code is very complex and I can't separate it into HTML, JS and CSS.
  There are many imports and interdependencies.
  What I could provide would be the .vue file that contains the part referring to the <Template>, the Script and the CSS of the page in question.
  But i don't know if this would help in any way?

  This is the content of the .vue File (without Template and style sections):

  <template>
  .
  .
  .
  </template>
  
  <script>
  import { ref } from 'vue'
  import "bootstrap/dist/css/bootstrap.min.css";
  import "jquery/dist/jquery.min.js";
  
  import "datatables.net";
  import "datatables.net-dt/css/jquery.dataTables.css";
  import $ from 'jquery';
  
  import DataTable from "datatables.net-vue3";
  import DataTablesLib from "datatables.net";
  import 'datatables.net-select';
  import 'datatables.net-buttons';
  import 'datatables.net-buttons/js/buttons.html5';
  import jszip from 'jszip';
  import 'datatables.net-buttons-dt';
  import 'pdfmake/build/pdfmake.js';
  import 'pdfmake/build/vfs_fonts.js';
  import pdfmake from 'pdfmake';
  
  import SwsApplication from "@/sws.application.js";
  
  DataTable.use(DataTablesLib);
  DataTablesLib.Buttons.jszip(jszip);
  DataTablesLib.Buttons.pdfMake(pdfmake);
  
  //import Set from "core-js/features/set";
  import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
  
  export default {
      name: 'ConsultaDadosRecentes',
      component: { PulseLoader },
      setup() {       
          let uf = ref('');
          let ufs = ref(['AC', 'AL', 'AM', 'AP', 'BA', 'CE', 'DF', 'ES', 'GO', 'MA', 'MG', 'MS', 'MT', 'PA', 'PB', 'PE',
              'PI', 'PR', 'RJ', 'RN', 'RO', 'RR', 'RS', 'SC', 'SE', 'SP', 'TO'
          ])
          let municipio = ref('');
          let municipios = ref([]);
          let estacao = ref('');
          let estacoes = ref([]);
          let todasEstacoesMunicipio = ref([]);
          let tpEstacoes = ref([]);
          let tpEstacao = ref('');
          let sensores = ref([]);
          let isLoading = false;
          let isTableOn = false;
          let sensor = ref('');
          const error = ref('');
  
          //carregaCbTpEstacoesSensores();
  
          function carregaCbMunicipios() {
  
              if (this.uf) {
                  //Reseta msg de erro
                  this.error = ref("")
                  //Reseta o combo de estações
                  this.estacoes = ref([]);
                  //Reseta o valor inicial do combo de Estação
                  this.estacao = ref('');
                  //Reseta o valor inicial do combo de Tipo de Estação
                  this.tpEstacao = ref('');
                  // Carrega combo de municípios da UF selecionada
                  SwsApplication.cidades(this.uf).then(data => this.municipios = data);
              } else {
                  //Reseta o valor inicial do combo de Município
                  this.municipio = ref('');
                  //Reseta o combo de municípios
                  this.municipios = ref([]);
                  //Reseta o valor inicial do combo de Estação
                  this.estacao = ref('');
                  //Reseta o combo de estações
                  this.estacoes = ref([]);
                  //Reseta o valor inicial do combo de Tipo de Estação
                  this.tpEstacao = ref('');
              }
  
          }
  
          function carregaCbEstacoes() {
  
              if (this.municipio) {
                  SwsApplication.estacoes(this.municipio).then(data => {
                      this.estacoes = data;
                      this.todasEstacoesMunicipio = this.estacoes;
                  });
              } else {
                  //Reseta o valor inicial do combo de Estação
                  this.estacao = ref('');
                  //Reseta o combo de estações
                  this.estacoes = ref([]);
                  //Reseta o valor inicial do combo de Tipo de Estação
                  this.tpEstacao = ref('');
              }
          }
  
          async function carregaCbTpEstacoesSensores() {
              //let resultado = await SwsApplication.pcdsTipoEstacaoSensores().then(data => this.tpEstacoes = data);
  
              try {
                  const resultado = await SwsApplication.pcdsTipoEstacaoSensores().then(data => this.tpEstacoes = data);
                  // eslint-disable-next-line no-undef
                  let sensoresUnfiltered = []
                  if (resultado && typeof resultado === 'object') {
                  
                      resultado.forEach(function(tpEst) {
                          sensoresUnfiltered = sensoresUnfiltered.concat(tpEst.sensor);
                      });
  
                      for (let sensor of sensoresUnfiltered) {
                          const sensorExistente = this.sensores.find((item) => item.sensor === sensor.sensor);
                          if (!sensorExistente) {
                              this.sensores.push(sensor);
                          }
                      }
                  }           
              } catch (error) {
                  console.error(error);
              }
          }
  
          function filtraCbEstacoesPorTipo() {
  
              this.estacoes = this.todasEstacoesMunicipio;
  
              if (this.tpEstacao != 0) {
                  //loop em this.estacoes para filtrar por tipo de estacao            
                  let estacoesFiltered = this.estacoes.filter(estacao => estacao.id_tipoestacao == this.tpEstacao);
                  this.estacoes = estacoesFiltered;
              }
          }
  
          function buscarDadosRecentes() {
  
              isLoading = true;
  
              console.log('TableOn > ', isTableOn);
  
              let params = {}
              const rede = 11;
              params.rede = rede;
  
              if (this.uf) {
                  params.uf = this.uf;
              } else {
                  this.error = 'Por favor selecione uma UF!';
                  return;
              }
              if (this.municipio) {
                  params.codibge = this.municipio;
              }
              if (this.tpEstacao) {
                  params.tipoestacao = this.tpEstacao;
              }
              if (this.estacao.codestacao) {
                  params.codestacao = this.estacao.codestacao;
              }
              if (this.sensor) {
                  params.sensor = this.sensor;
              }
  
              $(async function () {
  
                  let data = await SwsApplication.pcdsDadosRecentes(params.rede, params.uf, params.codibge,
                      params.tipoestacao, params.codestacao, params.sensor);                              
  
                  if (data) {
                      isTableOn = true;
                  }   
                  console.log('TableOn > ', isTableOn);
  
                  $('#tb_dadosrecentes').DataTable({
                      data: data,
                      language: {
                          emptyTable: 'Nenhum resultado foi encontrado para essa requisição.',
                      },
                      destroy: true,
                      paging: true,
                      searching: true,
                      processing: true,
                      select: true,
                      dom: 'Bfrtip',
                      //buttons: ['copy', 'csv', 'pdf', 'excel', 'print'],
                      columnDefs: [
                          {
                              targets: '_all',
                              defaultContent: '-',
                              className: 'dt-body-left'
                          }
                      ],
                      columns: [{
                          data: 'datahora',
                          title: 'datahora'
                      },
                      {
                          data: 'uf',
                          title: 'uf'
                      },
                      {
                          data: 'cidade',
                          title: 'cidade'
                      },
                      {
                          data: 'codestacao',
                          title: 'codestacao'
                      }
                      ]
                  });
              });         
              isLoading = false;
          }
  
          return {
              uf,
              ufs,
              municipio,
              municipios,
              estacao,
              estacoes,
              todasEstacoesMunicipio,
              tpEstacao,
              tpEstacoes,
              sensor,
              isLoading,
              sensores,
              error,
              carregaCbMunicipios,
              carregaCbEstacoes,
              carregaCbTpEstacoesSensores,
              filtraCbEstacoesPorTipo,
              buscarDadosRecentes
          };
      },
      mounted() {
          console.log('Sucesso');
      },
      beforeUnmount() {
          console.log('unmount')      
  
          if ($.fn.DataTable.isDataTable('#tb_dadosrecentes')) {
  
              if ($('#tb_dadosrecentes').DataTable() != null) {
                  var tableId = "#tb_dadosrecentes";
  
                  $('#tb_dadosrecentes').DataTable().clear();
                  $('#tb_dadosrecentes').DataTable().destroy();
                  //window.removeEventListener('resize', this.someMethod)
  
                  //2nd empty html
                  $(tableId + " tbody").empty();
                  $(tableId + " thead").empty();
                  $('#tb_dadosrecentes').empty();
              }
          }       
          console.log('TableOn >> ', this.isTableOn);
          this.isTableOn = false;
      }
  
  }
  </script>
  <style>
  .
  .
  .
  </style>
  

  Att,
  Adenilson
• allan Posts: 63,116Questions: 1Answers: 10,397 Site admin

  July 2023

  Ah, you are using the DataTables Vue component. That certainly helps to clarify that point.

  That said, I don't see anything wrong with the above code. It is very similar to the Stackblitz example I linked to before.

  Can you link to the resulting page please? I really would need to be able to see it given that the example that I can see is working.

  Allan