Changing class on a button through the API

Loren Maxwell

Disclaimer: I intended to do an example, but I've run short on time and thought I'd go ahead and ask the question before I leave for my appointment to see if there's a simple answer that's posted before I get back :-) I'll do one later if necessary.

Anyway -- I have a table with a custom reload button and when the user presses the button I'd like it to change class to indicate it's reloading and then when the reload is done change class back to the normal state.

I can do this with jQuery by assigning the button an id with the attr option:

var table = $("#table").DataTable({
    buttons: {
        dom: {
            button: {
                className: "btn btn-primary btn-sm"
            }
        },
        buttons: [{
            name: "reload",
            text: "<i class=\"fas fa-circle-notch fa-fw\"></i>",
            className: "btn-success",
            action: function(e, dt, node, config) {

                // Toggles class when pressed
                $("#reload-button").toggleClass("btn-success btn-warning")

                dt
                    .ajax.reload(() => {

                        // Toggles class after reload
                        $("#reload-button").toggleClass("btn-success btn-warning")

                    })
            },
            attr: {
                title: "Reload",
                id: "reload-button"
            }
        }, ]
    },

    yada yada yada

});

However it seems like I should be able to do it with the API using the to$() method on this for the button:

var table = $("#table").DataTable({
    buttons: {
        dom: {
            button: {
                className: "btn btn-primary btn-sm"
            }
        },
        buttons: [{
            name: "reload",
            text: "<i class=\"fas fa-circle-notch fa-fw\"></i>",
            className: "btn-success",
            action: function(e, dt, node, config) {

                // I think it should toggle class but doesn't
                this.to$().toggleClass("btn-success btn-warning")

                dt
                    .ajax.reload(() => {

                        // I'm not sure here how to pass "this" into the function
                        $("#reload-button").toggleClass("btn-success btn-warning")

                    })
            }
        }, ]
    },

    yada yada yada

});

Any thoughts?

kthorngren

You can use $(e.currentTarget) as your selector. For example:
http://live.datatables.net/wezanoko/1/edit

Kevin

Loren Maxwell

Great, Kevin (@kthorngren).

As always, I greatly appreciate the help!