Simulate a click on a button
Simulate a click on a button
achilleus
Posts: 5Questions: 1Answers: 0
With datatables I have the following in my initialization of the table
layout: {
top2Start: {
buttons: [
{
className: 'dt-table-button',
extend: 'collection',
text: '--- State ---',
buttons: [
{
text: 'Open',
active: false,
title: 'Open',
className: '',
action: function (e, dt, node, config) {
config.active = !config.active;
}
},
{
text: 'Closed',
active: false,
title: 'Closed',
color: 'red',
className: '',
action: function (e, dt, node, config) {
config.active = !config.active;
}
},
]
}
]
}
}
I was wondering if I can simulate a click on any of the buttons runtime, e.g. using jquery (button.trigger('click')).
I have previously look add callAction, but I don't know how to pass dt, node and config correctly.
var collection = table.context[0].layout.top2Start.buttons[1].buttons;
$.each(collection, function(index, item) {
if (item.text === state.columns[8].search.search) {
item.action.call(??, ??, ??);
}
});
I do not know what to put at the ??
table of course is var table = $('.table').DataTable({
Yes, I am pretty new with Datatables and buttons.
Hope anyone can point me in the right direction
Regards
This question has an accepted answers - jump to answer
Answers
You can use
button().trigger()for this.Kevin
Thanks for the quick reply!
It seems that because of my implementation
table.buttonsis emptyWhen I
console.log(table.buttons()), length=0I'm not sure what you are referring to or how you are trying to use
table.buttons.I see you are trying to use this. ITs not recommended to access the internal structure directly as it may change in updated versions.
Please provide details of what you are trying to do so we can offer suggestions.
Kevin
Hi,
Of course, I'll try to explain:
I have a dropdown with buttons, where the buttons function as toggles:
click 'Open' once -> only the open items are shown, click 'Open' again' all items are shown.
click 'Closed' once -> only the closed items are shown, click 'Closed' again' all items are shown.
(For now I have limited to 2, however IRL I have eight buttons for eight different states, but don't want to complicate things here).
I have this working with the action on each button, where I call a function that takes care of this, but also visually changes the button clicked (add or remove a checkmark, to indicate that the button was toggled on or off)
Because of stateSave on page reload the table will indeed only show the 'Open' items when that button was clicked. However the (visual) state of the button is not saved.
Therefore I would like to loop over all buttons to match the text (or any other prop) of the button against the state of the table (which basically is the search term in column[0]). When it matches I would like to update the state of that button, either by simulating a click or by adapting the config of the button.
I have put together a JSFiddle of the functionality above
https://jsfiddle.net/odxqcbhn/4/
What I want is to be able to access the buttons after initialisation, so I can perform a button().trigger()
but I can not see how to access the buttons.
It sounds like all you want to do is add the
activeclass to the buttons that have a search term. Is this correct?It looks like
stateLoadedexecutes before the buttons are added to the page. I would look at usinginitCompletethen usecolumns().search()to get all the column search terms. Loop through the result and apply the class to the appropriate button. For example:https://jsfiddle.net/b24n3z5p/1/
This uses
buttons.buttons.nameand thebutton-selectorof {string}:name to target the correct button. Thenbutton().node()is used to return a jQuery object soaddClass()can be used.Also used is
each()andany().The font awesome stuff doesn't seem to be working so I added this to highlight the active buttons:
Is this what you are looking for?
Kevin
Yes, that does what I want. Thanks a lot!