Direct insertion buttons

Direct insertion buttons

bartschbartsch Posts: 7Questions: 1Answers: 0

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.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • bartschbartsch Posts: 7Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    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

  • bartschbartsch Posts: 7Questions: 1Answers: 0

    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!!

  • bartschbartsch Posts: 7Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    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

  • bartschbartsch Posts: 7Questions: 1Answers: 0

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

  • bartschbartsch Posts: 7Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    Answer ✓

    You can use button().trigger().

    Kevin

  • bartschbartsch Posts: 7Questions: 1Answers: 0

    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.

Sign In or Register to comment.