Answers

• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  December 2021

  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 Posts: 7Questions: 1Answers: 0

  December 2021

  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 Posts: 21,336Questions: 26Answers: 4,951

  December 2021

  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 Posts: 7Questions: 1Answers: 0

  December 2021

  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 Posts: 7Questions: 1Answers: 0

  December 2021

  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 Posts: 21,336Questions: 26Answers: 4,951

  December 2021 Answer ✓

  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 Posts: 7Questions: 1Answers: 0

  December 2021

  Oh yeahhh thank you! I ddint know that the buttons have to be loaded afetr the table is loaded.
• bartsch Posts: 7Questions: 1Answers: 0

  December 2021

  And is there any way to call the functions this buttons does? So I can trigger from a link for example?
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  December 2021 Answer ✓

  You can use button().trigger().

  Kevin
• bartsch Posts: 7Questions: 1Answers: 0

  December 2021

  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.