How to view multiple tables through dropdown menu?

Question

How can I have 2 or more tables on 1 page with only viewing 1 table at the time with dropdown menu you choose which table to show without a button or refreshing the page? Does anyone have an idea? Atleast we need to use ajax/js. I use datatables plugin for my tables. Here is a Fiddle

<select>
<option value='table1'>table1</option>
<option value='table2'>table2</option>
</select>

Answer 1

You can do it by making an onchange function, giving ids to the table and displaying table according to the value like this

 function display(val){ document.getElementById(val).style.display = "block"; val== "table1"?document.getElementById("table2").style.display = "none":document.getElementById("table1").style.display = "none";; } 

 #table2{ display:none; } 

 <select onchange = "display(this.value)"> <option value='table1' selected>table1</option> <option value='table2'>table2</option> </select> <table border='1' id="table1"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>john</td> <td>Edit</td> <td>Delete</td> </tr> </tbody> </table> <table border='1' id="table2"> <thead> <tr> <th>ID</th> <th>type</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Male</td> <td>Edit</td> <td>Delete</td> </tr> </tbody> </table> 

If you have more than two tables, you can simply do it by adding a class

 function display(val){ var el = document.getElementsByClassName("allTables"); for(i=0; i<el.length; i++) { el[i].style.display = "none"; } document.getElementById(val).style.display = "block"; } 

 .allTables{ display:none; } #table1{ display:block; } 

 <select onchange = "display(this.value)"> <option value='table1' selected>table1</option> <option value='table2'>table2</option> <option value='table3'>table3</option> </select> <table border='1' id="table1" class="allTables"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>john</td> <td>Edit</td> <td>Delete</td> </tr> </tbody> </table> <table border='1' id="table2" class="allTables"> <thead> <tr> <th>ID</th> <th>type</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Male</td> <td>Edit</td> <td>Delete</td> </tr> </tbody> </table> <table border='1' id="table3" class="allTables"> <thead> <tr> <th>ID</th> <th>type</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>4</td> <td>Male</td> <td>Edit</td> <td>Delete</td> </tr> </tbody> </table> 

Answer 2

You can use jquery hide/show method to do the same.

Please take a look at the fiddle

Below code handles showing/hiding of tables

$(function() {

    $('#table1').wrap('<div id="hidetable1" class="hide" style="display:none"/>');
    $('#table2').wrap('<div id="hidetable2" class="hide"  style="display:none"/>');
    $('#table3').wrap('<div id="hidetable3"  class="hide" style="display:none"/>');

    $('#table1').DataTable( {
      "searching": true
    } );
    $('#table2').DataTable( {
      "searching": true
    } );
    $('#table3').DataTable( {
      "searching": true
    } );
    console.log($("#drop"))
    $("#hide"+ $("#drop")[0].value).show(); 
       $("#drop").change(function () {
            var end = this.value;
            $('.hide').hide();
           $("#hide"+end).show(); 
        });
    });

Answer 3

Initially set any one table which you want to display and make all the others hide. Then pass the selected table id to the onchange propery then hide all the other tables. To get all the tables which we want to hide, group it under a class name.

 function show(){ var selectedTable= document.getElementById("drp").value; var elements = document.getElementsByClassName('tableClass') for (var i = 0; i < elements.length; i++){ if(elements[i].id==selectedTable) elements[i].style.display = ''; else elements[i].style.display = 'none'; } } 

 <select onchange="show(value)" id="drp"> <option value='table1'>table1</option> <option value='table2'>table2</option> </select> </br></br> <table border='1' id="table1" class="tableClass"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>john</td> <td>Edit</td> <td>Delete</td> </tr> </tbody> </table> <table border='1' id="table2" class="tableClass" style="display:none;"> <thead> <tr> <th>ID</th> <th>type</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Male</td> <td>Edit</td> <td>Delete</td> </tr> </tbody> </table>