Simple Button Callback (Vue implementation)

jperson334

** I can't find a solution to my problem so I can't show an example (there are no errors to show) **

I'm trying to implement a copy button in a datatables with a simple callback that displays a notification once the data has been copied to the clipboard.

Something along the lines of:

buttons:[{
    extend: 'copy',
    text: 'Copy',
    callback: function() {
        alert('data copied!')
    }
}

I am using the buttons plug in :https://datatables.net/reference/button/ and I have a copy button working as per the docs: https://datatables.net/reference/button/copy

The only part potentially relevant that I can find in the documentation in the "action" method - however this is described as "Display a dialogue box that the user can use to copy table data to clipboard", (I'm not sure what this means) anyway, use of "action" seems to entirely overwrite the button functionality (ie. I can use it to show an alert - but the copy action itself does not occur) and I can't see any other way to implement this, maybe I could/ should extend action? I'm not sure, and I can't see in the docs how to achieve this anyway.

It seems like a simple request, so I may be missing something, any help/ pointers would be very helpful. Thank you.

allan

Hi,

The buttons.buttons.action option probably is what you want here. It is the function that is triggered when the button is activated (either by the keyboard or with a mouse click).

The copy button has a default action that will copy the table's information to clipboard and then show a notification that it has been done.

If you want to do some additional display (such as the alert()), then you need to override the action function with your own one, which will call the original action when needed.

If you have a look at the last example on the buttons.buttons.action page, that shows how this might be done.

Allan