HTML5 export buttons

Perdido

Hello

I'm trying use initialise javascript to create buttons:

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

But I don't know how doesn't work !
Maybe will be know where is my problem.

Best regards Dawid

Perdido

Maybe I need css file and js file in my project ? but which ?

Now i use:
- datatable.js
- buttons.html5.js

Maybe in this is problem ?

Maybe can you help me ? :)

tubedisasters

I got most of the html5 buttons working with the old version of datatables (I had a couple of issues when I used the new datatables and editor so I just decided to get the html5 buttons working with the older version):

You need the following in the head of your html:

// your original version of datatables.js goes before these other js imports

<script type="text/javascript" src="Buttons-1.0.3/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="JSZip-2.5.0/jszip.js"></script>
<script type="text/javascript" src="pdfmake-0.1.18/build/pdfmake.js"></script>
<script type="text/javascript" src="pdfmake-0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="Buttons-1.0.3/js/buttons.html5.js"></script>
<script type="text/javascript" src="Buttons-1.0.3/js/buttons.print.js"></script>

For css I just added this:

<link rel="stylesheet" type="text/css" href="Buttons-1.0.3/css/buttons.dataTables.css"/>

These files can all be downloaded from 'https://datatables.net/download/index'.

All the buttons work perfectly except for Print (which I will have a play around with). I also didn't use CSV as Excel is working well (and I may have also had a small issue with CSV with the old datatables). Here are my button settings (note 'reportTitle' is a variable that contains the name and description for my report):

        buttons: [
            {
                extend: 'copyHtml5',
                exportOptions: {
                    columns: ':visible'
                },
                title: reportTitle
            },
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                },
                title: reportTitle
            },
            {
                extend: 'pdfHtml5',
                exportOptions: {
                    columns: ':visible'
                },
                title: reportTitle,
                download: 'open'
            },
            {
                extend: 'print',
                exportOptions: {
                    columns: ':visible'
                },
                message: reportTitle,
                autoPrint: false
            }
        ]

A tip about the PDF export. I found that the columns were not autospaced so it didn't look good if you only had three or four columns. I looked at the very well documented 'pdfmake.js' site and added this line to Allan's 'buttons.html5.sj' line 632:

                    widths: '*',

This changes the code to:

                table: {
                    headerRows: 1,
                    widths: '*', // this is the added line
                    body: rows
                },
                layout: 'noBorders'

and spaces all of the columns beautifully.

I will have a try plugging in the new versions of datatables and editor in a few days but I hope this helps. As I say 'Print' needs a little work so you might want to leave that out for now.

tubedisasters

For others - don't forget that you have to use B instead of T in the 'dom' setting (Perdido has done this correctly)

allan

If you have any feedback on the issues you are having with the print button, they would be very welcome.

Allan

Perdido

Ok in my solution problem was in html initialization where I used attribute data-role="dataTable". I remove this attribute and add dataTable to class.

<table id="tblWorkCenter" class="dataTable striped border bordered" data-searching="true">

Now it work very nice :)

Thank you very much !