html
html
xxxxxxxxxx<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated DataTable</title> <link rel="stylesheet" href="https://cdn.datatables.net/1.11.6/css/jquery.dataTables.min.css"> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="https://cdn.datatables.net/1.11.6/js/jquery.dataTables.min.js"></script> <style> /* Define the animation classes */ .animate-show { opacity: 0; transition: opacity 1s ease-in-out; } .animate-hide { opacity: 1; transition: opacity 1s ease-in-out; } </style></head><body><table id="example" class="display"> <thead> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <!-- Your table data goes here --> </tbody></table><script> $(document).ready(function() { var table = $('#example').DataTable({ dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print', 'colvis' ] }); // Add animation classes when showing/hiding columns $('#example').on('column-visibility.dt', function (e, settings, column, state) { var columnIndex = table.column(column).index(); // Apply animation classes to the cells in the column table.cells().nodes().to$().each(function () { var cell = $(this).find('td:eq(' + columnIndex + ')'); cell.toggleClass('animate-show', !state); cell.toggleClass('animate-hide', state); }); // Remove animation classes after the animation completes setTimeout(function () { table.cells().nodes().to$().each(function () { var cell = $(this).find('td:eq(' + columnIndex + ')'); cell.removeClass('animate-show animate-hide'); }); }, 1000); // Adjust the duration as needed }); });</script></body></html>Source: chat.openai.com
Twitter 
LinkedIn