Using buttons

thowi

Hi altogether,

seems that I drew a mental black here... I don't get the buttons to show up.
I used the download builder and downloaded datatables including the whole buttons extension (all options). In my working datable I then added:
buttons: [ 'print', 'excel' ]
But no buttons showing up. After scanning the whole documentation I don't see any further things I need to do but this line... but no buttons.

Where is my mistake?

Thank you for your help!

colin

Hi @thowi ,

The two most common causes are missing JS/CSS files, or dom hasn't been modified to display the buttons. This page here should get you going,

Cheers,

Colin

thowi

Thank you Colin,
that helps! And I think I know where the problem is...
https://www.dropbox.com/s/1sohjbx3lsgdrhz/dom.jpg?dl=0
dom: 'Bfrtip',
won't work for be, because on top left position I have this pagelength dropdown.
Do you have a tip for me how to move that dropdown to bottom middle? Then I would have the possibility to put the buttons to the top left.
Thank you very much!

colin

Hi @thowi ,

It depends on how you created the dropdown, so I need to see that working.

One other option is to create the button like this example here. With this, you can add it to any element in the DOM,

Cheers,

Colin

thowi

Hey Colin,

the dropdown was not specifically created.
This is my whole configuration:

$(document).ready(function() {
    $('#example').DataTable( {
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Alle"]],
                "pageLength": -1,
        "processing": true,
        "ajax": "sql/today.php",
                columns: [
                        { data: 'Artikelnummer' },
                        { data: 'Beschreibung' },
                        { data: 'Anzahl', render: $.fn.dataTable.render.number( '.', ',', 0, '', ' Stk.' ) },
                                { data: 'Brutto', render: $.fn.dataTable.render.number( '.', ',', 2, '', ' €' ) }
                ],
        "order": [[ 3, "desc" ]],
                //dom: 'Bfrtip',
                buttons: [ 'print', 'excel', 'pdf' ],
                responsive: true,
                drawCallback: function () {
            var api = this.api();
            $( '#Gesamt' ).html(
                'Gesamtumsatz: '+ Math.round(api.column(3).data().sum() * 100)/100 + ' €'
            );
                }
    } );
} );

When using line 14, the top left dropdown will disappear and no buttons show up.

tangerine

Your "dom" needs an "l" for the page length dropdown.

thowi

So you mean
dom: 'Blfrtip',
right? Sadly doesn't work for me Now the dropdown is still there, but no buttons. Same look like my screenshot above.

colin

As @tangerine said, the l does the length, see this example here. It would be worth read the page for dom as there's some good examples on there.

thowi

Mhhhh, very strange. I just opened the page in Chrome instead of Safari and there the 3 Buttons are available. Only in Safari they are not... strange!

colin

That is strange - I'll get that looked at here in case it's a problem.

thowi

OK. I am using Safari Version 12.0 (13606.2.11) on High Sierra 10.13.6 (17G65)

allan

On your browser's console could you run navigator.userAgent and show me the output please? I've only got El Capitan to hand at the moment unfortunately and it doesn't have the APIs needed to support the Excel download.

Allan

thowi

Using that: https://w3schools.com/jsref/tryit.asp?filename=tryjsref_nav_useragent

Will show:
User-agent header sent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Safari/605.1.15

Does that help?

thowi

And, by the way good to know: jQueryUI buttons work. And the pagination buttons of datatables also work.

thowi

Quite interesting, after upgrading to Mac OS Mojave 10.14 (18A391) the buttons are there, also in Safari.
The Mojave upgrade also upgraded Safari to Version 12.0 (14606.1.36.1.9).
Before I was using Version 12.0 (13606.2.11) on High Sierra 10.13.6 (17G65).
Maybe the newer build fixed something?

allan

I tried it with 10.13.6 (I think!) earlier today and it seems to work without an issue. Can't remember the exact version of Safari in that, but it was high enough to pass the check that I've got to make sure that the Safari version has the APIs needed to create the file. They were really late in adding that ability.

Allan