Buttons for Excel, csv, print

JanNL_FR

Hi, I did look at the examples but with no succes.
How can I implement buttons in a working script:

<script>
    function format(d) {
        return (
            'SectorName 1: ' +
            d.sectorname1 +
            '<br>' +
            '<br>' +
            'Target Sentence: ' +
            d.targetsentence
        );
    }

    const table = new DataTable('#example', {
        ajax: 'server_processing.php',
        columns: [
            {
                class: 'dt-control',
                orderable: false,
                data: null,
                defaultContent: '',
            },
            { data: 'company' },
            { data: 'country' },
            { data: 'targetyears' },
            { data: 'sectorcode1' },
            { data: 'sectorname1' },
            { data: 'sourcedate' },
        ],
        order: [[1, 'asc']],
        processing: true,
        serverSide: true,
        initComplete: function () {
            this.api()
                .columns()
                .every(function (index) {
                    let column = this;
                    let title = column.header().textContent;

                    // Skip search input creation for the first column (index 0)
                    if (index === 0) {
                        return;
                    }

                    // Create input element
                    let input = document.createElement('input');
                    input.placeholder = 'Search ' + title;
                    column.footer().replaceChildren(input);

                    // Event listener for user input
                    input.addEventListener('keyup', () => {
                        if (column.search() !== input.value) {
                            column.search(input.value).draw();
                        }
                    });
                });
        },
    });

    // Array to track the ids of the details displayed rows
    const detailRows = [];

    table.on('click', 'tbody td.dt-control', function () {
        let tr = event.target.closest('tr');
        let row = table.row(tr);
        let idx = detailRows.indexOf(tr.id);

        if (row.child.isShown()) {
            tr.classList.remove('details');
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice(idx, 1);
        } else {
            tr.classList.add('details');
            row.child(format(row.data())).show();

            // Add to the 'open' array
            if (idx === -1) {
                detailRows.push(tr.id);
            }
        }
    });

    // On each draw, loop over the `detailRows` array and show any child rows
    table.on('draw', () => {
        detailRows.forEach((id, i) => {
            let el = document.querySelector('#' + id + ' td.dt-control');

            if (el) {
                el.dispatchEvent(new Event('click', { bubbles: true }));
            }
        });
    });
</script>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Start with the Buttons installation docs. Here are the basic steps:

1. Get the Buttons library and the code for the exports you want. Use the Download Builder for this.
2. Add the dom`` and-option buttons` options to your Datatables initialization code. Start with this simple example and remove the buttons you don't want to use. For example:

    const table = new DataTable('#example', {
        dom: 'Bfrtip',
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
        ajax: 'server_processing.php',
        columns: [

Kevin

JanNL_FR

Hi, Thank you.

I downloaded files via the download option and started with the example data. I've used some code from a live example, but I don't quite understand how to do it yet.

https://campcare.eu/buttons.html

kthorngren

Start by looking at the browser's console. You will see these two errors:

Uncaught TypeError: Cannot set properties of undefined (setting 'pdfMake')

Uncaught Cannot extend unknown button type: excelHtml5

I believe the problem is that you are loading jquery.dataTables.min.js twice:

    <script type="text/javascript" src="js/jquery-3.7.0.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="js/jszip.min.js"></script>
    <script type="text/javascript" src="js/pdfmake.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="js/buttons.print.min.js"></script>

Once on line 2 then, after loading jszip and pdfmake, again on line 6. Line 6 is overwriting the connection jszip and pdfmake made to the Datatables loaded on line 2. Remove line 6 so Datatables loads only once.

Kevin

JanNL_FR

Thanks Kevin.

Not all required .js files were present on the server.

Changed
... buttons: ['copy', 'csv', 'excel', 'pdf', 'print'], ...
To
... buttons: ['copy', 'csv', 'excelHtml5', 'pdfHtml5', 'print'], ...

JanNL_FR

When I enter the PDF button, I get a message in the console:

Uncaught (in promise) File 'Roboto-Regular.ttf' not found in virtual file system

Promise.then (asynchroon)
Document._createDoc @ pdfmake.min.js:2
Document.getBuffer @ pdfmake.min.js:2
Document.getBlob @ pdfmake.min.js:2
Document.download @ pdfmake.min.js:2
action @ buttons.html5.min.js:8
a @ dataTables.buttons.min.js:4
(anoniem) @ dataTables.buttons.min.js:4
dispatch @ jquery-3.7.0.js:5135
elemData.handle @ jquery-3.7.0.js:4939

kthorngren

It looks like you are missing the pdf export button requirement of vs_fonts.js. See the pdf docs for details.

Use the download builder to get all the appropriate files.

Kevin

JanNL_FR

Thanks,

vfs_fonts.js :
That was what was supposed to replace the double Line 6, but I forgot to implement it.

Jan.