<!-- required files --> <link href="../assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" /> <link href="../assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" /> <link href="../assets/plugins/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" /> <script src="../assets/plugins/datatables.net/js/dataTables.min.js"></script> <script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script> <script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script> <script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script> <script src="../assets/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script> <script src="../assets/plugins/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script> <script src="../assets/plugins/datatables.net-buttons/js/buttons.colVis.min.js"></script> <script src="../assets/plugins/datatables.net-buttons/js/buttons.html5.min.js"></script> <script src="../assets/plugins/datatables.net-buttons/js/buttons.print.min.js"></script> <script src="../assets/plugins/pdfmake/build/pdfmake.min.js"></script> <script src="../assets/plugins/pdfmake/build/vfs_fonts.js"></script> <script src="../assets/plugins/jszip/dist/jszip.min.js"></script> <!-- html --> <table id="data-table-buttons" width="100%" class="table table-striped table-bordered align-middle text-nowrap"> <thead> <tr> <th width="1%"></th> <th width="1%" data-orderable="false"></th> ... </tr> </thead> <tbody> ... </tbody> </table> <!-- script --> <script> $('#data-table-default').DataTable({ responsive: true, dom: '<"row mb-3"<"col-md-6"B><"col-md-6"fr>>t<"row mt-3"<"col-md-auto me-md-auto"i><"col-md-auto ms-md-auto"p>>', buttons: [ { extend: 'copy', className: 'btn-sm' }, { extend: 'csv', className: 'btn-sm' }, { extend: 'excel', className: 'btn-sm' }, { extend: 'pdf', className: 'btn-sm' }, { extend: 'print', className: 'btn-sm' } ], }); </script>