$('#example').DataTable({ dom: 'Bfrtip', // Configure the order of the components: Buttons, filtering, processing, table, and paging buttons: [ { extend: 'copy', // Create a copy button text: 'Copy to Clipboard', // Set the button text className: 'custom-copy-button', // Add a custom class to the button exportOptions: { columns: ':visible' // Export only visible columns } }, { extend: 'csv', // Create a CSV export button title: 'My CSV Export', // Set the exported file name charset: 'UTF-8', // Set the exported file charset bom: true, // Add Byte Order Mark for UTF-8 compatibility fieldSeparator: ',', // Set the field separator for the exported file extension: '.csv' // Set the exported file extension }, { extend: 'excel', // Create an Excel export button title: 'My Excel Export', // Set the exported file name extension: '.xlsx' // Set the exported file extension }, { extend: 'pdf', // Create a PDF export button title: 'My PDF Export', // Set the exported file name orientation: 'landscape', // Set the PDF orientation (portrait or landscape) pageSize: 'A4', // Set the PDF page size (A3, A4, etc.) extension: '.pdf' // Set the exported file extension }, { extend: 'print', // Create a print button text: 'Print Table', // Set the button text autoPrint: true, // Automatically print after the window opens customize: function (win) { $(win.document.body).find('table').addClass('custom-print-class'); // Add a custom class to the printed table } }, { text: 'Custom Button', // Create a custom button action: function (e, dt, node, config) { alert('Custom button clicked!'); // Define the action for the custom button } }, { extend: 'colvis', // Create a column visibility button text: 'Show/Hide Columns', // Set the button text columns: ':not(:first-child)' // Exclude the first column from the list of columns to toggle }, { extend: 'pageLength', // Create a page length button text: 'Rows per page' // Set the button text } ] });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter