Data export buttons are not showing on screen

denisPF

Hello colleagues,

I'm using Datatables.net in a vue js application. I'm trying to insert the option to export table data in pdf and csv, however, the way I'm doing it, the buttons to export the data are not being displayed on the screen.
The snippet of code where I insert the buttons is this:

$('#tb_dadosrecentes').DataTable({
                    data: data,
                    language: {
                        emptyTable: 'Nenhum resultado foi encontrado para essa requisição.',
                    },
                    destroy: true,
                    paging: true,
                    searching: true,
                    processing: true,
                    dom: 'Bfrtip',
                    buttons: ['copy', 'csv', 'pdf', 'excel', 'print'],
                    columnDefs: [

and the section where I import the components is the following:

import "datatables.net-dt/js/dataTables.dataTables";
import "datatables.net-dt/css/jquery.dataTables.min.css";
import "datatables.net-buttons/js/dataTables.buttons.js";
import "datatables.net-buttons/js/buttons.colVis.js";
import "datatables.net-buttons/js/buttons.flash.js";
import "datatables.net-buttons/js/buttons.html5.js";
import "datatables.net-buttons/js/buttons.print.js";
import 'datatables.net-buttons';
import 'datatables.net-buttons-dt';

Could someone help me identify what I'm doing wrong or what I'm missing?

att,
Adenilson

allan

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

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

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

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

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

Allan asked you to provide a test case.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

allan

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

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

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