Buttons for Excel, csv, print

Buttons for Excel, csv, print

JanNL_FRJanNL_FR Posts: 47Questions: 15Answers: 2
edited November 2023 in Free community support

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

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

    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 () {
                .every(function (index) {
                    let column = this;
                    let title = column.header().textContent;

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

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

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

    // 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()) {

            // Remove from the 'open' array
            detailRows.splice(idx, 1);
        } else {

            // Add to the 'open' array
            if (idx === -1) {

    // 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 }));

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

This question has accepted answers - jump to:


  • kthorngrenkthorngren Posts: 20,537Questions: 26Answers: 4,816

    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: [


  • JanNL_FRJanNL_FR Posts: 47Questions: 15Answers: 2

    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.


  • kthorngrenkthorngren Posts: 20,537Questions: 26Answers: 4,816
    Answer ✓

    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.


  • JanNL_FRJanNL_FR Posts: 47Questions: 15Answers: 2

    Thanks Kevin.

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

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

  • JanNL_FRJanNL_FR Posts: 47Questions: 15Answers: 2

    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

  • kthorngrenkthorngren Posts: 20,537Questions: 26Answers: 4,816
    Answer ✓

    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.


  • JanNL_FRJanNL_FR Posts: 47Questions: 15Answers: 2


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


Sign In or Register to comment.