Toggle Button change color if active/passive

jeank

Hi!

I would like to use a table like this:

https://datatables.net/extensions/buttons/examples/column_visibility/columnsToggle.html

I understand tables are available in Bootstrap 4:

https://datatables.net/examples/styling/bootstrap4.html

I understand further that I can custom button

https://datatables.net/extensions/buttons/custom

But my question is how to custom toogle buttons like in my example:

https://www.w3schools.com/code/tryit.asp?filename=GUMEE4PZCIQF

I would like to have all toogle button as btn-success from start

And if clicked turn to btn-danger.

And if clicked again turn back to btn-success.

And how to use this toogle yes/no table in Bootstrap 4 design?

Could anybody help me with this and include a solution in my w3schools code, save it and send me the link?

Thanks

allan

Here is how you can change the class on the button based on its active state (which you get using button().active(). The change of class is performed on the buttons-action event.

For Bootstrap 4 styling, use the download builder to get all the required files you need.

Allan

jeank

Hi Allan,

Hope you are great (like me)!

Thanks for that quick help.

I was not successful using download builder, maybe because I`m not such a great coder.

So I try to adapt via css style.

https://w3schools.com/code/tryit.asp?filename=GUN0X1X9YPGD

In most cases it worked but I still need your help:

1.

I would like to have a litte bit more space between the buttons and the search field

2.

Could the search frame be green from the start instead of grey?

3.

How can I change color of blue X in search box right if I input something?

4.

How to change PREVIOUS and NEXT Text Color

5.

How to change black btn hover color to none or green?

And last question in general:

How can I reduce one button/column?

Thanks

allan

I would like to have a litte bit more space between the buttons and the search field

Looks okay to me.

Could the search frame be green from the start instead of grey?

div.dataTables_filter input {
  background-color: green;
}

It might be worth doing a CSS course online which enable you to do similar CSS tweaks such as in 3-5..

How can I reduce one button/column?

I'm afraid I don't understand the question?

Allan