How to attach an id to a button?

TomBajzek

I need to attach an id attribute to a button, because I want to put a handler on the button, but I've not been able to do that. I have the following code which works correctly in its current context except that the id does not get attached to the button, preventing me from adding the handler for the new functionality I want:

        if ($('#itRole').attr('data-itRole') === 'tech' ||
            $('#itRole').attr('data-itRole') === 'manager') {
            new $.fn.dataTable.Buttons( ticketTable, [
                { extend: "create", editor: ticketEditor },
                { extend: "edit", editor: ticketEditor },
                { extend: 'selectedSingle', 
                    text: 'Notes',
                    attr: {
                        id: 'notesBtn'              
                    },
                    // id: 'notesBtn',
                    action: function(e,dt,node,config) {
                        noteTable.ajax.reload();     
                        noteEditor
                            .title('Create new note')
                            .field( 'notes.ticket_id' )
                            .def( ticketTable.row( { selected: true } ).data().id);
                    }
                }
            ] );

I've tried this as you see it and also with the 'attr: ... ' commented out and the id: 'notesBtn" uncommented, and neither version results in an id on the Notes button.

What is the correct way to attach an id attribute to this button?

Thanks,
Tom

rf1234

"id" doesn't really work with buttons but "className" and "name" do:

buttons: [
{extend: "editComments", editor: myEditor,
  className: "editorOnly"},
{extend: "sendMessage", editor: myEditor,
 className: "editorOnly", name: "sendMessage"}
]

myTable.buttons('.editorOnly').nodes().addClass('hidden');
myTable.buttons('sendMessage:name').nodes().removeClass('hidden');

If I recall it correctly you would need to assign a class or a name first and then assign further attributes with jQuery. I did this here in this example to open a bootstrap modal. But for your purposes I would use "className" or "name":

 //custom button to create and edit reporting filters
    $.fn.dataTable.ext.buttons.reportFiltrs = {
        //only enabled when one row is selected (like edit / delete)
        extend: 'selectedSingle', //alternative would be 'selected' (multiple rows)
        text: reportFiltrsLabel,
        className: "reportFiltrsButton",
        action: function ( e, dt, button, config ) {
            $('.reportFiltrsButton').attr(
                {
                    "data-toggle": "modal",
                    "data-target": "#reportFiltrModal"
                }
            );
            showReportFiltrTable();
        }
    };

TomBajzek

OK. I'll use the className.

Thanks,
Tom

colin

Also, as shown in @rf1234 's reply, is the buttons.buttons.action function - you can just use this instead of creating another handler.

allan

You need to be using the nightly version of Buttons to have it work with the id property: http://live.datatables.net/nekeneca/1/edit .

Allan