Persisting issue with column visibility/buttons displaying in wordpress
Persisting issue with column visibility/buttons displaying in wordpress
hnorman138
Posts: 12Questions: 5Answers: 0
I have a site at testing.uwsinc.net/dashboardtest that uses a datatable. Everything has worked fine with it, but due to the nature of wordpress, some of the inherent datatable code has had to be modified or formatted differently in the past. I'm wondering if that's the issue here as well.
I've implemented the below code but I've tried for days and cannot get the button to show on my site for column visibility. I need any possible way to show/hide columns on this table. This code works on my test site but not this wordpress site. Any ideas?
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.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://cdn.datatables.net/buttons/1.3.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.15/filtering/row-based/range_dates.js"></script>
</head>
<body>
<label style="font-weight:bold;">Select the table you would like to view:
</label></br>
<select name='tables' id='select-tables'>
<option value="mytable">Survey Test Table</option>
<option value="mytableSurvey">Survey Only</option>
</select>
</br>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#mytable').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf', 'colvis'
]
});
$('#mytableSurvey').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf', 'colvis'
]
});
$('.dataTable').wrap('<div class="dataTables_scroll" />');
$(document).on('change' , '#select-tables', function(){
var table = $(this).val();
$('#' + table +'_wrapper').show();
$('[id$="_wrapper"]').not('#' + table +'_wrapper').hide();
});
$("#select-tables").trigger("change");
});
}(jQuery));
</script>
This discussion has been closed.