Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Datatables Colvis classes


Hey Sean,

I'm adding colvis as part of buttons with this configuration:
buttons: [
'copy', 'excel', 'pdf', 'colvis'
],

https://ibb.co/D4Pc9V0

Could you add necessary options for dt-button-active class to make it work properly? Any workaround class definition until fix would be great.

See the original behavior here. It was part of the old keen as well.
https://datatables.net/extensions/buttons/examples/column_visibility/simple.html


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi Mete,

You can modify your DataTables configuration like this:

Add a custom class to the colvis button.
Use the buttons.buttons.action callback to add/remove the dt-button-active class.


$(document).ready(function() {
var table = $("#example").DataTable({
dom: "Bfrtip",
buttons: [
"copy", "excel", "pdf",
{
extend: "colvis",
text: "Column visibility",
className: "my-colvis-button",
action: function(e, dt, button, config) {
// Toggle visibility
$.fn.dataTable.ext.buttons.collection.action.call(this, e, dt, button, config);

// Add/remove active class
if ($(button).hasClass("dt-button-active")) {
$(button).removeClass("dt-button-active");
} else {
$(button).addClass("dt-button-active");
}
}
}
]
});

// Add custom styles for active class if needed
$(".my-colvis-button").on("click", function() {
$(this).toggleClass("dt-button-active");
});
});


This script does the following:

Initializes the DataTable with the colvis button included in the buttons array.
Adds a custom my-colvis-button class to the colvis button.
Uses the action callback to toggle the dt-button-active class when the button is clicked.
You can also add CSS to style the dt-button-active class as needed:


.dt-button-active {
background-color: #d9d9d9; /* Example style */
}


Let me know if you need further assistance!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(