Reputation: 1

Datatables export buttons not showing

I have a table that is made in the $( document ).ready function. I am also using the jQuery DataTables plugin. For some reason, when the page loads, the datatable loads but the export buttons don't.

function loadAct() {
            var url = 'http://10.26.192.70/apns/index.php/Busqueda_c/listarAsignaciones';
            $.post(url, {
            }, function (data) {
                var arrayAsignaciones = JSON.parse(data);
                // INGRESA INFORMACION DENTRO DE CADA TABLA DESPUES DE HABER AGREGADO UNA ASIGNACION
                for (i = 1; i < arrayAsignaciones.length; i++) {
                    var str2 = arrayAsignaciones[i].Act_TipoActa;
                    var id2 = str2.replace(/ /gi, '-');
                    var idtable2 = 'table-' + id2;
                    var idtbody2 = 'tbody-' + id2;
                    var table = document.getElementById(idtable2);
                    var tbody = document.getElementById(idtbody2);
                    // Aca comienza la creacion del <tbody> 
                    $(table).find(tbody).append(
                            "<tr>" +
                            "<td>" + arrayAsignaciones[i].Act_Grado + "</td>" +
                            "<td>" + arrayAsignaciones[i].Act_Nombre + "</td>" +
                            "<td>" + arrayAsignaciones[i].Act_Rut + "</td>" +
                            "<td>" + arrayAsignaciones[i].Act_Codigo + "</td>" +
                            "<td>" + arrayAsignaciones[i].Act_Dotacion + "</td>" +
                            "<td>" + arrayAsignaciones[i].Act_FechaInicio + "</td>" +
                            "<td>" + arrayAsignaciones[i].Act_FechaTermino + "</td>" +
                            "<td>" +
                            "<a href='#' onclick='eliminarAsignacion(" + arrayAsignaciones[i].Act_Rut + ", " + arrayAsignaciones[i].Act_Id + ");return false;'>" +
                            "<span class='glyphicon glyphicon-remove' style='margin-left:25px; font-size:15px; color:red;'>" +
                            "</span>" +
                            "</a>" +
                            "</td>" +
                            "</tr>"
                            );

                    // Aca termina la creacion del <tbody> 
                }

                $('.tableBody').DataTable({
                    dom: 'Blfltip',
                    buttons: [
                        'copyHtml5',
                        'excel',
                        'csvHtml5',
                        'pdfHtml5'
                    ],
                        "sDom": 'rt',
                        paging: false,
                        searching: false,
                        ordering: false
                });
            });
        }

But it is not showing any export button and I can't resolve it.

I also included the following Javascript and CSS from the dateTable download builder:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.6/jq-2.2.3/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/af-2.1.2/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.css"/> 
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.6/jq-2.2.3/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/af-2.1.2/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.js"></script>

Here is the HTML where I use the dataTabe:

<div class="panel panel-success" id="" style="width:1400px; margin-left:auto; margin-right:auto ">
    <div class="panel-heading">
        <table>
            <tbody>
                <tr>
                    <td><h3 class="panel-title">PILOTOS (17%)</h3></td>
                    <td><div></div></td></tr>
            </tbody>
        </table>
            
    </div>
    <div class="panel-body" id="PILOTOS-(17%)">
        <div id="table-PILOTOS-(17%)_wrapper" class="dataTables_wrapper no-footer">
            <table class="display tableBody dataTable no-footer" id="table-PILOTOS-(17%)" role="grid">
                <thead>
                    <tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;">GRADO</th>
                        <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;">NOMBRE</th>
                        <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;">RUN</th>

CODIGO DOTACION FECHA INICIO FECHA TERMINO ELIMINAR C.P.R. GDO. 12 asdf asdf asdf asdf asdfasdf asdfasdf SEC. INFORMATICA (P.7). 03/08/2016 04/08/2016

Upvotes: 0

Answers (2)

Md Masud

Reputation: 2713

You need to follow this example Here .

It works for me.

Add all js as this order.

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js
https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js

Add css.

https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css      

https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css

Initailize Datatable as example.

$(document).ready(function() {
   $('#example').DataTable( {
     dom: 'Bfrtip',
     buttons: [
      'copyHtml5',
      'excelHtml5',
      'csvHtml5',
      'pdfHtml5'
    ]
  } );
} );

Upvotes: 0