Simulate a click on a button

achilleus

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

kthorngren

You can use button().trigger() for this.

Kevin

achilleus

Thanks for the quick reply!

It seems that because of my implementation table.buttons is empty

When I console.log(table.buttons()), length=0

kthorngren

It seems that because of my implementation table.buttons is empty

I'm not sure what you are referring to or how you are trying to use table.buttons.

var collection = table.context[0].layout.top2Start.buttons[1].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

achilleus

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.

achilleus

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.

kthorngren

It sounds like all you want to do is add the active class to the buttons that have a search term. Is this correct?

It looks like stateLoaded executes before the buttons are added to the page. I would look at using initComplete then use columns().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.name and the button-selector of {string}:name to target the correct button. Then button().node() is used to return a jQuery object so addClass() can be used.

Also used is each() and any().

The font awesome stuff doesn't seem to be working so I added this to highlight the active buttons:

button.dt-button.active {
  background: orange;
}

Is this what you are looking for?

Kevin

achilleus

Yes, that does what I want. Thanks a lot!