Change background color if button is currently active

Tamras

I added custom buttons to filter my list, is there a way to change the background color of the button associated with the current filter? With the following code, if user clicks on 'A' button, I want that button to display in different background color and then revert if another button is clicked?

dataTableExample = $('#tableAcronyms').DataTable({
            "pageLength": 25, //number of rows to display per page
            "searching": true,
            "order":[0, "asc"], 
            "paging": true, 
            "info": true, 
            "dom": "Bfrtip",
            "buttons": [
                {
                    "text": "A",
                    "action": function (e, dt, node, config) {
                        regExSearch = '^' + 'A';
                        dt.column(0).search(regExSearch, true, false).draw();
                    }
                },
                {
                    "text": "B", 
                    "action": function (e, dt, node, config) {
                        regExSearch = '^' + 'B';
                        dt.column(0).search(regExSearch, true, false).draw();
                    }
                },

Bindrid2

In your action, node should be the dom button clicked so remove the class that sets the color from all buttons then add the color class to that button(node)

Tamras

@Bindrid2 Thanks. I just need to figure out how to do what you just said. I'll read through the buttons page, maybe it'll explain it to me how to remove the class.

Bindrid2

@Tamras here is something for you to play with

https://jsbin.com/micejaw/edit?html,css,js,output

Tamras

@Bindrid2 thank you!! I just made the font and border change color rather than background.

"dom": "Bfrtip",
            "buttons": [
                {
                    "text": "A",
                    "action": function (e, dt, node, config) {
                        regExSearch = '^' + 'A';
                        dt.column(0).search(regExSearch, true, false).draw();
                        $(".dt-buttons").find(".xselected").removeClass("xselected");
                        node.addClass("xselected");
                    }
                },

CSS:

    .dt-button.xselected {
        color:blue;
        border: 1px blue solid;
    }