Using dropdown to show 2 different datatables

Question

I've been working with an issue on my WordPress site for a bit now but I'm stuck. I have two working datatables (both showing on top of one another on the page currently) and a dropdown selection box. I need the dropdown box, which houses 2 options (one for each table) to select one table and show only that one.

Ideally I'd like the page to load with a default table (id="mytable") and then the dropdown can control everything from there.

Here is the code, other than the tables themselves:

<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>
(function($) {
$('#select-tables').on('change', function(){
   var table = $(this).find('option:selected');
   $('#' + table).show();
   $('table').not('#' + table).hide();
});
}(jQuery));

Both tables have their own datatable script:

//datatable 1, table id is mytable

<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#mytable').DataTable();
   $('.dataTable').wrap('<div class="dataTables_scroll" />');
});
}(jQuery));
</script>

// table 2, table id is mytableSurvey
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#mytableSurvey').DataTable();
   $('.dataTable').wrap('<div class="dataTables_scroll" />');
});
}(jQuery));
</script>

Since this is in wordpress, I had to modify the JS for the dropdown code to match the datatable code so that it will work in WP. Is there a better way to code the dropdown with JS for existing datatables?

What do you mean "a better way"? does it work? what are you asking ? You only need $('.dataTable').wrap('<div class="dataTables_scroll" />'); once as it applies to all of them and you only need to include the data tables plugin once, which you should ideally be doing in wp_enqueue_scripts — andrew
– andrew, Commented May 22, 2017 at 15:14
Most of that datatable code looks redundant, especially the loading of the jQuery plugin twice. — Phill Healey
– Phill Healey, Commented May 22, 2017 at 15:21
Sorry, I thought the main issue was clarified in the first statement. The datatables work, they both load just fine and operate perfectly, but I don't want two tables on top of each other. I want the drop down to select which table is shown. You can see I use mytable and mytableSurvey as the option values in the dropdown and that corresponds to the 2 table ids. If I have the tables set to display:none;, I want to use the dropdown to select one of the 2 tables and show that one on the page. — Geoff_S
– Geoff_S, Commented May 22, 2017 at 15:22
@TomN. It's actually loaded 3 times in the code you provided. Anyway, hopefully my answer will help you out. — Phill Healey
– Phill Healey, Commented May 22, 2017 at 15:29

Phill Healey · Accepted Answer · 2017-05-22 15:29:15Z

1

You have a lot of redundant code in their, so I'll also reduce a lot of the repetition for you.

<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));

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

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

answered May 22, 2017 at 15:29

Phill Healey

3,2002 gold badges35 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Geoff_S Over a year ago

Thank you, this is at least starting to work. After changing the code, the page now loads with just the mytable, which is correct, but when I select mytableSurvey nothing changes. It still shows mytable

Geoff_S Over a year ago

You can see the state of it at testing.uwsinc.net/dashboardtest. I'm using the code above except I had to end script and start new script between the first jQuery and second function($). This is the only way it would actually create datatables. It seems to be successfully hiding the second table but not it's wrap/elements. And the dropdown is still not functional, it seems

Phill Healey Over a year ago

Great! Glad I could help.

Collectives™ on Stack Overflow

Using dropdown to show 2 different datatables

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related