I have a wordpress site at www.testing.uwsinc.net/dashboardtest (visit for current state of issue) and I’ve had these two datatables working and displaying normally, but I’ve tried to incorporate a dropdown to use as a selection to either view one table or the other, but not both at the same time.

Below is the current code which is showing the first table and hiding the second (though it only hides the data, not the datatable search and page options for the second table). The issue is that the dropdown is not functioning at all. If I make a selection it just shows in the box but nothing changes on the page.

Again, All I’m looking to do is show #mytable on page load and have a dropdown containing #mytable and #mytableSurvey and whichever one I select should show.

<select name='tables' id='select-tables'>
<option value="mytable">Survey Test Table</option>
<option value="mytableSurvey">Survey Only</option>
</select>

//This is the code for the dropdown 

<script type="text/javascript"   src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
<script type="text/javascript">
(function($) {
$('#select-tables').on('change', function(){
var table = $(this).find('option:selected');
$('#' + table).show();
$('table').not('#' + table).hide();
});
}(jQuery));
</script>

<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#mytable').DataTable();
$('#mytableSurvey').DataTable();
$('.dataTable').wrap('<div class="dataTables_scroll" />');

//open the #mytable table on page load by default
$('#mytable').show();
$('#mytableSurvey').hide();
});
}(jQuery));
</script>

Read more here: Using dropdown to display one datatable or the other


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: