Direct insertion buttons

bartsch

I would like to place the buttons in another container than the default. I am using this code:

$(document).ready( function () {
var table = $('#example').DataTable( {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );
  
table.buttons().container()
    .appendTo( $('#some-container' ) );

} );

but the buttons doesn't appear and no error code is shown..
I download all the extensions in a bundle js and css required. What is possible going wrong?

Thank you.

kthorngren

Your code snippet works here:
http://live.datatables.net/kaxoruta/1/edit

Maybe you don't have the js and css includes in the right order. If you still need help then please post a link to your page or a test case (update mine) showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

bartsch

And which is the order I have to include the css and js?
The confusing thing is that isnt any error in the console...

Thank you for your response.

kthorngren

Use the Download Builder to get the needed js and css in the order required. I did this for my test case Or you can look at one of the examples to see the order. In general datatables.js is required by the buttons code so it needs to be loaded before buttons.js. The rest should follow.

The confusing thing is that isnt any error in the console...

Make sure the selector is found. If not it will fail silently, see this updated example:
http://live.datatables.net/yijowuwi/1/edit

Kevin

bartsch

ok I test your code with my html headers for the js and css and work fine than expected, but this is mine and doesnt work.

document.addEventListener("DOMContentLoaded", function() {

var table = $('#example').DataTable({
    buttons: [
        'copy', 'excel', 'pdf'
    ],
    stateSave: true,
    responsive: true,
    "ajax": {
      url: "datos_clientes.php?accion=listar",
      dataSrc: ""
    },
    "columns": 
    [
      {
        "data": "cliente"
      },
      {
        "data": "nombre",
        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
          $(nTd).html("<a href='proyectos.php?id_cliente="+oData.id_cliente+"'>"+oData.nombre+"</a>");
        }
      },
      {
        "data": null,
        "orderable": false
      }
    ],
    "columnDefs": 
    [
    {
        targets: 2,
        "defaultContent": "<button class='btn btn-sm btn-primary botonmodificar'>Modifica</button>",
        data: null
    },
    { responsivePriority: 1, targets: 1 }
    ],
      "language": {
        "url": "DataTables/spanish.json",
      },

  });

  table.buttons().container()
      .appendTo( $('#some-container' ) );
  });

Thank you for yor help!!

bartsch

The html table:

<table class="table table-striped table-bordered table-hover display nowrap" id="example" style="width:100%">
          <thead>
            <tr>
              <td class="desktop">Referencia</td>
              <td>Cliente</td>
              <td class="desktop">Modificar</td>
            </tr>
          </thead>
      </table>

if delete the ajax call anf fill it like yours it works.

kthorngren

Due to the asynchronous nature of ajax the table variable is not ready in line 44. Move lines 44 and 45 into initComplete and replace table with this.api(), something like this:

initComplete: function () {
  this.api().buttons().container()
      .appendTo( $('#some-container' ) );
}

This way it will execute after Datatables has initialized.

Kevin

bartsch

Oh yeahhh thank you! I ddint know that the buttons have to be loaded afetr the table is loaded.

bartsch

And is there any way to call the functions this buttons does? So I can trigger from a link for example?

kthorngren

You can use button().trigger().

Kevin

bartsch

Oh awesome! that way I can have my design more accordingly to the way its going..
And I hide the container where the buttons firstly are placed.