Buttons in not showing with French translation

diogofigueiredo

Hi all,

I tried to use the French translation, all fine everything is translated but I lost my buttons.

Like this is ok:
$("#example1").DataTable({
"responsive": true,
"lengthChange": false,
"pageLength": 50,
"autoWidth": false,
"buttons": ["excel", "pdf", "print", "colvis"]
}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');

when I apply the French CDN buttons are not shown anymore:
$("#example1").DataTable({
language: {
url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json'
},
"responsive": true,
"lengthChange": false,
"pageLength": 50,
"autoWidth": false,
"buttons": ["excel", "pdf", "print", "colvis"]
}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');

I didn't change anything else. Does someone has a clue?

THanks in advance,
BR
Diogo

kthorngren

I think it has to do with the asynchronous ajax request for the language CDN. The response hasn't returned. See this note in the ajax.url docs:

Note that when this parameter is set, DataTables' initialisation will be asynchronous due to the Ajax data load. That is to say that the table will not be drawn until the Ajax request has completed. As such, any actions that require the table to have completed its initialisation should be placed into the initComplete callback.

It works moving the buttons insert code into initComplete:
https://live.datatables.net/malunice/1/edit

Kevin

diogofigueiredo

Hi,

Thanks for your answer, unfortunately, it didn't solve my problem. I applied the same code as you mentioned with the initComplete option but it does not work. I have no errors on the console as well, I have no flags to start digging.

Like this no problem at all. But

Some how is not appending the buttons. I go crazy

BR
Diogo

kthorngren

You didn't move the buttons insertion code into initComplete as my example shows. Here is the code from the example:

$("#example").DataTable({
  language: {
    url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json'
  },
  "responsive": true,
  "lengthChange": false,
  "pageLength": 50,
  "autoWidth": false,
  "buttons": ["excel", "pdf", "print", "colvis"],
  initComplete: function () {
    this.api().buttons().container().appendTo('#example_wrapper .col-md-6:eq(0)')
  }
});

Kevin

rf1234

Yep, it still doesn't work. But I think Kevin gave you some good advice.

You need to use "initComplete" to make sure the language file loading will have completed when appending the buttons. Take a look at his example. Here is the relevant code:

initComplete: function () {
    this.api().buttons().container().appendTo('#example_wrapper .col-md-6:eq(0)')
}

diogofigueiredo

When I tried it the first time:

$("#example1").DataTable({    
        "language": {
            "url": '//cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json'
        },        
        "responsive": true,
        "lengthChange": false,
        "pageLength": 50,
        "autoWidth": false,
        "buttons": ["excel", "pdf", "print", "colvis"],
        initComplete: function () {
            this.api().buttons().container().appendTo('#example_wrapper .col-md-6:eq(0)')
        }
});

.appendTo('#example_wrapper =>> should be example1

My fault now it's working like a charm, thanks guys!

BR
Diogo