Export buttons are not displaying

Lokeshwari

Hi, I have a datatable in my page which is having dynamic data. I used below code for exporting my data but dont know why bittons are not visible. I have included all scripts also mentioned below.

 $('#tblConsolidatedReport').dataTable({
                            "data": table_data.Table,
                            "columns": columns,
                            "destroy": true,
                            "cache": false,
                            "ordering": true,
                            "scrollX": true,
                            buttons: [
         'copy', 'excel', 'pdf'
                            ]
                        });

here are the links and scripts i used

<link href="../assets/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css" rel="stylesheet" />
    <link href="../assets/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
   

    <link href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" type="text/css" rel="stylesheet" />

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js   "></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>

    <!-- Jquery Core Js -->
    <script src="../assets/bundles/libscripts.bundle.js"></script>
    <!-- Lib Scripts Plugin Js -->
    <script src="../assets/bundles/vendorscripts.bundle.js"></script> 

colin

Hi @Lokeshwari ,

You need to set dom, as in the example here.

Cheers,

Colin

Lokeshwari

included like below, but no luck
var table = $('#tblConsolidatedReport').dataTable({
"data": table_data.Table,
"columns": columns,
"destroy": true,
"cache": false,
"ordering": true,
"scrollX": true,
dom: 'Bfrtip',
buttons: [
{ extend: 'copy', attr: { id: 'allan' } }, 'csv', 'excel', 'pdf'
]
});

Lokeshwari

buttons are not visible.

colin

Hi @Lokeshwari .

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

I copied everything from line 5 to 15 in your links and scripts i used code and your buttons config into this test case and it works:
http://live.datatables.net/rurifece/1/edit

There is something specific to your page that is causing the buttons to not show. Are you loading jQuery in this file?

    <!-- Jquery Core Js -->
    <script src="../assets/bundles/libscripts.bundle.js"></script>

Loading jQuery more than once will cause problems. Only load it once.

I would start by just using lines 5 through 15 then add the others one by one until the issue occurs. Also you may want to consider using the Download Builder to obtain the correct Datatables Bootstrap integration files.

Kevin

Lokeshwari

Hi Kevin,
Thanks for your reply.
That script is to load library scripts whithout that jquery is not loading. I can not even remove that.