Symfony 5 + Webpack Encore + 数据表：未显示按钮

Question

This is my second failed attempt to use a library to export a simple table to any kind of document (Excel, PDF, etc.).

This time I am using DataTables . The table is being displayed and everything seems good, but no button for exporting, copying or anything is displayed.

As you can see there are no export buttons anywhere. There are also no warnings or errors in the developer console.

These are the steps I followed in order to use DataTables in my Symfony 5 project:

1. Add the CDN links to the base template from the download page with the following options:

   • Styling Framework : Bootstrap 4
   • Packages :
     • DataTables
   • Extensions :
     • Buttons, HTML5 Export, JSZip, pdfmake
     • Print view
     • Responsive

2. Instantiate the DataTable to create the table. This is how the final JS looks like in the developer console:

$(document).ready(function() {
    $('.table').DataTable({
        ajax: {
            url: "/api/inventory_items.json",
            dataSrc: ''
        },
        buttons: ['excel'],
        columns: [{
                data: 'center.name',
                title: 'Centro',
                defaultContent: 'N/A',
            },
            {
                data: 'program.name',
                title: 'Programa',
                defaultContent: 'N/A',
            },
            {
                data: 'description',
                title: 'Descripción',
                defaultContent: 'N/A',
            },
            {
                data: 'comment',
                title: 'Comentario',
                defaultContent: 'N/A',
            },
            {
                data: 'item_condition',
                title: 'Condición',
                defaultContent: 'N/A',
            },
            {
                data: 'age',
                title: 'Antigüedad',
                defaultContent: 'N/A',
            },
            {
                data: 'purchase_price',
                title: 'Precio de compra',
                defaultContent: 'N/A',
            },
            {
                data: 'purchase_currency',
                title: 'Moneda de compra',
                defaultContent: 'N/A',
            },
            {
                data: 'sn',
                title: 'S/N',
                defaultContent: 'N/A',
            },
            {
                data: 'physical_location',
                title: 'Ubicación Física',
                defaultContent: 'N/A',
            },
            {
                data: 'date',
                title: 'Fecha',
                defaultContent: 'N/A',
            },
            {
                data: 'ref',
                title: 'Documento de referencia',
                defaultContent: 'N/A',
            },
            {
                data: 'status',
                title: 'Estado',
                defaultContent: 'N/A',
            },
            {
                data: 'os',
                title: 'Sistema Operativo',
                defaultContent: 'N/A',
            },
            {
                data: 'cpu',
                title: 'Procesador',
                defaultContent: 'N/A',
            },
            {
                data: 'type',
                title: 'Tipo de procesador',
                defaultContent: 'N/A',
            },
            {
                data: 'hdd',
                title: 'Disco duro',
                defaultContent: 'N/A',
            },
            {
                data: 'ram',
                title: 'Memoria RAM',
                defaultContent: 'N/A',
            }
        ],
        responsive: true,
        language: {
            url: "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
        },
    })
})

This is how my Twig table base template looks like:

{% extends 'base.html.twig' %}

{% set bodyTitle %}
    {% block setBodyTitle %}{% endblock %}
{% endset %}

{% block title %}
    {{ parent() }} | {{ bodyTitle }}
{% endblock %}

{% block body %}
    <div class="container{% block fluid%}{% endblock%} mt-3">
        <div class="row">
            <div class="col">
                <h1>{{ bodyTitle }} <a class="btn btn-outline-success" href="{% block bodyCreateUrl %}{% endblock %}">➕</a></h1>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <table class="table"></table>
            </div>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/b-html5-1.6.2/b-print-1.6.2/cr-1.5.2/r-2.2.5/datatables.min.css"/>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-colvis-1.6.2/b-html5-1.6.2/b-print-1.6.2/sp-1.1.1/datatables.min.js"></script>


    <script>
        $(document).ready(function() {
            $('.table').DataTable({
                ajax: {
                    url: "/api/{% block jsApi %}{% endblock %}.json",
                    dataSrc: ''
                },
                buttons: [ 'excel' ],
                columns: [{% block jsTableColumns %}{% endblock %}],
                responsive: true,
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
                },
            })
        })
    </script>
{% endblock %}

Despite everything I did was on my Symfony project I have tried to replicate the frontend on a snippet:

 var fakeApiData = [{ id: 1, program: { id: 1, name: 'Some place' }, description: 'fgdfg', comment: 'dfgdfg', item_condition: 'New', location: { id: 2, name: 'Some place' }, fund_source: { id: 1, name: 'Donation' }, age: '1', purchase_price: 1200, purchase_currency: 'US$', physical_location: 'Somewhere', date: '2020-07-05T00:00:00+02:00', status: 'ok', os: 'Windows 10', ram: 4, cpu: 'I3 3.2GHz', type: 'x64', hdd: '320', center: { id: 1, name: 'Some place' } }]; $(document).ready(function() { $('.table').DataTable({ data: fakeApiData, buttons: ['excel', 'copy' ], columns: [{ data: 'center.name', title: 'Centro', defaultContent: 'N/A', }, { data: 'program.name', title: 'Programa', defaultContent: 'N/A', }, { data: 'description', title: 'Descripción', defaultContent: 'N/A', }, { data: 'comment', title: 'Comentario', defaultContent: 'N/A', }, { data: 'item_condition', title: 'Condición', defaultContent: 'N/A', }, { data: 'age', title: 'Antigüedad', defaultContent: 'N/A', }, { data: 'purchase_price', title: 'Precio de compra', defaultContent: 'N/A', }, { data: 'purchase_currency', title: 'Moneda de compra', defaultContent: 'N/A', }, { data: 'sn', title: 'S/N', defaultContent: 'N/A', }, { data: 'physical_location', title: 'Ubicación Física', defaultContent: 'N/A', }, { data: 'date', title: 'Fecha', defaultContent: 'N/A', }, { data: 'ref', title: 'Documento de referencia', defaultContent: 'N/A', }, { data: 'status', title: 'Estado', defaultContent: 'N/A', }, { data: 'os', title: 'Sistema Operativo', defaultContent: 'N/A', }, { data: 'cpu', title: 'Procesador', defaultContent: 'N/A', }, { data: 'type', title: 'Tipo de procesador', defaultContent: 'N/A', }, { data: 'hdd', title: 'Disco duro', defaultContent: 'N/A', }, { data: 'ram', title: 'Memoria RAM', defaultContent: 'N/A', } ], responsive: true, language: { url: "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json" }, }) })

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-html5-1.6.2/b-print-1.6.2/r-2.2.5/datatables.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script> <script src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-html5-1.6.2/b-print-1.6.2/r-2.2.5/datatables.min.js"></script> <div class="row"> <div class="col"> <table class="table"></table> </div> </div>

In the snippet, the left button that expands information regarding "Centro" column is not present in my table, as you can appreciate...

I have changed DataTables option ajax for data to "call" some fake data (similar to my server) in order to make a test.

But anyway, here the export buttons are not being displayed either. What am I missing?

Answer 1

You are instantiating DataTables twice it has to be instantiated only once

add this code inside your datatables function it will allow you to copy/csv/pdf...

$('.table').DataTable({
    dom: 'B<"clear">lfrtip',
    buttons: {
        name: 'primary',
       buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
        }}       
    ); 

here is a jsfiddle of a working example