Dynamic Data Tables with Column Visibility Toggle and Print Feature (Crocoblock)

Dynamic Data Tables with Column Visibility Toggle and Print Feature (Crocoblock)

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.dataTables.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>

<script> 
jQuery(document).ready(function($) { 
    var table = $('.jet-dynamic-table').DataTable({
        info: true,
        ordering: false,
        paging: true,
        pageLength: 15,
        scrollX: false,
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'print',
                exportOptions: {
                    columns: ':visible'
                }
            },
            'colvis'
        ],
        initComplete: function() {
            var searchInput = $('.dt-search input');
            searchInput.attr('placeholder', 'Search...');
        },
        columnDefs: [
            {
                targets: -1,
                visible: false
            }
        ]
    });
}); 
</script>

gistfile1.txt

div.dt-buttons > .dt-button:first-child, div.dt-buttons > div.dt-button-split .dt-button:first-child {
    margin-left: 0;
  	background:#1d293e;
  	color: #dddedf;
}
div.dt-buttons > .dt-button, div.dt-buttons > div.dt-button-split .dt-button, div.dt-buttons:hover > .dt-button:hover, div.dt-buttons:hover > div.dt-button-split:hover .dt-button:hover{
			background:#1d293e;
  		color: #dddedf;
}
.dt-search {
        display: flex;
        justify-content: flex-end;
        width: 100%;
  			margin-bottom:10px;
    }
    .dt-search input.dt-input {
        width: 15%;
      	height:40px;
    }
    .dt-search label {
        display: none;
    }
    .dt-search input::placeholder {
        color: #999999;
    }
.dt-info{
 margin-top:10px; 
}
.paging_full_numbers{
 				display: flex;
        justify-content: flex-end;
}