How to add "data-*" html attribute to some dt button

orney21d@gmail.com

I would like to add some html attribute to "a" generated by datatable buttons without doing it by JQuery but datatable api. Button have "className", "Text" properties in extends but i don't see option to add custom attributes... How can i do that. Thanks .

Tom (DataTables)

There is no option to add in custom attributes. You have to do it using jQuery and the API.

Example

var table = $('#myTable').DataTable();
 
table
    .button( 'copy:name' )
    .nodes()
    .attr('name','value');

Thanks

Tom

orney21d@gmail.com

Hi Tom,
Thanks for the answer. i understand you but i'm unable to get reference to some button.

I have definitión and all is fine, buttons is working nice but i wana to get reference to some of them to modify as you toldme.

i have inside DataTable options the buttons def...:

var datatable = $('#grid').DataTable({
 buttons: [
            {
                extend: 'copyHtml5',
                name:  'copyBtn',
                text: '<i class="fa fa-clone"></i>',
                titleAttr: 'Copiar',

            },
            {
                extend: 'excelHtml5',
                text: '<i class="fa fa-file-excel-o"></i>',
                titleAttr: 'Excel',`
.
.
});

After instanciate my datatable:
i wana to get the copy button as follow to modify it:

datatable.button( 'copyBtn:name' )
    .nodes()
    .attr('name','value');

But i see that
datatable.button( 'copyBtn:name' ).length is equal to "0"

What i'm doing wrong??.

Best regards.

orney21d@gmail.com

For some reason i need to do

new $.fn.dataTable.Buttons(datatable, {
        
    });

after datatable definition, and then i can do :

datatable.button(0) getting the button reference... i Dont understand yet why should i do that...

allan

My guess is that you are Ajax loading the data for your table - although without the full code or a link to a test case it is impossible to say. The reason for that is that Buttons will initialise when the table is fully ready. If the table load is async, then so it Buttons.

You could use initComplete and modify the buttons in there.

Allan

orney21d@gmail.com

Hi @allan, thanks for the response... I should to say you that there isn't ajax loading, maybe in the future jeje, but for testing purpose i just want first customize some things:

The load :

var dataset = [
        { "Id": 1, "Nombre": "Filomeno", "Apellido": "Segurola", "Nomina": 1906.95,  ....
   }
];

Setting datasource and defining buttons:

var datatable = $('#grid').DataTable({
        data: dataset,
        .
        .
        .
         buttons: [
              {
                  extend: 'copyHtml5',
                  name: 'copyBtn',
                  text: '<i class="fa fa-clone"></i>',
                  titleAttr: 'Copy',

              },
              {
                  name: 'excelBtn',
                  extend: 'excelHtml5',
                  text: '<i class="fa fa-file-excel-o"></i>',
                  titleAttr: 'Excel',
                  exportOptions: {
                      columns: [1, 2, 3, 4]
                  }
              },
              .
              .
              .
              .
});

After that i want to add some attribute to first button for example:
$("a", datatable.buttons(0).container(0)).first().attr('data-toggle', 'tooltip')

In the before line i see for example that if i haven't the next sentence:

new $.fn.dataTable.Buttons(datatable, {
        buttons: [
            'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5', 'print'
        ]
    });

then :
datatable.buttons(0) ==0

So, when i define buttons again in following sentence:

new $.fn.dataTable.Buttons(datatable, {
        buttons: [
            'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5', 'print'
        ]
    });

i can access buttons, but when i add attribute as set before in the first button (copy button), i want to override div buttons section, this section have a classes "dt-buttons, .btn-group", so i do:
$(".dt-buttons, .btn-group").replaceWith(datatable.buttons(0, null).containers());

but after all load, i sow that the attributes i added to "anchors" buttons isn't there, so,
It has not been made any modification...

Any suggestion??.

Thanks very much...

allan

Are you using the dom property to insert the buttons onto the page? Again, without a test case it is impossible to say. This is why the forum rules request that a test case give given so we don't need to guess and we don't have this back-and-forth.

i want to override div buttons section

I'm afraid I don't understand - could you clarify this point.

Allan

orney21d@gmail.com

Hi everybody, @allan sorry for the little explanation... My english is not so good so, sorry for that too... I have resolve my issue, i'll explain how... The fact is that when I tried to change the html buttons of DataTable, it seems that even the datatable had not loaded completely it's components like buttons and more... So what i did is to attach to "init.dt" event, and inside this event modify what i wanted. i show you how:

$("#grid").on('init.dt', function (e, settings, json) {

        //##########  INI TOOLTIP ##############
        var api = new $.fn.dataTable.Api(settings);
        if (api.buttons().length > 0) {

            $("a", api.buttons().container(0)).each(function (index) {
                $(this).attr('data-toggle', 'tooltip');
                $(this).attr('data-placement', 'top');
            });
            
            //Initializing JQuery tooltip
            $('[data-toggle="tooltip"]').tooltip();
        }

        //##########  END TOOLTIP ##############
    }).dataTable();

I hope I explained better...

Thanks all very much for the feedback.

if there is anything i'll be glad in collaborate

orney21d@gmail.com

How to mark this post as answered??

allan

I've done so now. Thanks for letting me know.

Allan