colvis button not showing in wordpress site
colvis button not showing in wordpress site
hnorman138
Posts: 12Questions: 5Answers: 0
I have a wordpress site with a page template that has 2 datatables. Everything is showing up and working perfectly except for buttons. I only need colvis for column visibility but I've also tried with others and they just won't display. I'm wondering if I need to reformat something for wordpress because the code below works on my other site and my test site.
Link to the live site with the issue: http://www.testing.uwsinc.net/dashboardtest
<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>
<style type="text/css">
table,td,th{
border:1px solid black;
}
table{
border-collapse: collapse;
}
td{
border-collapse: collapse;
/*border-right: none;
border-left: none;*/
}
th{
padding-left: 10px;
padding-right:10px;
}
td{
padding-left: 10px;
padding-right:10px;
}
</style>
</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: 'Blfrtip',
buttons: [
'colvis'
]
});
$('#mytableSurvey').DataTable({
dom: 'Blfrtip',
buttons: [
'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 question has an accepted answers - jump to answer
This discussion has been closed.
Answers
You're missing an import to the core library of the buttons extension.
https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js
Thank you, I've actually updated that and also used the download builder but still no luck...
This conversation seems to be happening in two different places.
Please post a link to a test case showing the issue, per the forum rules, and also don't post duplicates
.
Allan
Sorry about that Allan, I didn't mean to duplicate or post without deleting. I'm updating the code but you can see the current table at testing.uwsinc.net/dashboardtest
You're overdosing on datatables' Javascript:
line 73 src='http://www.testing.uwsinc.net/wp-content/plugins/wp-jquery-datatable/js/jquery.dataTables.js?ver=4.6.6'
line 378 src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"
line 1073 src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"
What does that mean, exactly? And how might I fix it in this case? I'm unfortunately VERY new to JS and datatables, I usually just build within wordpress
It means you only need DataTables' Javascript once. As you are working within Wordpress, it probably makes sense to use the file at line 73 and remove the other two lines.
However I have no idea where you got that file, and why it is version 4.6.6.
It is up to you to establish the facts about that file.
That was a plugin but I've deactivated it now. I didn't realize the admin had installed it since we went with a custom built datatable. So now I will eliminate one of the others and try that out. Thank you!
I eliminated the plugin but still no button showing up. I'm lost on this one
Looking at the link now (thanks for that), I can see:
and
Neither of them are configured with Buttons nor where to put the buttons.
You might use, for example:
See the Buttons documentation for details.
Allan