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>

G_S · Accepted Answer · 2018-02-27 16:42:23Z

1

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

edited Feb 27, 2018 at 16:42

answered Feb 26, 2018 at 12:52

G_S

7,1302 gold badges27 silver badges54 bronze badges

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

Comments

Sanchit Patiyal · Accepted Answer · 2018-02-26 12:49:21Z

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>

Alright looks good , but what if i want to add another table, bcs in your code now I wouldnt understand if I wanted to add a 3rd table?

Libin C Jacob · Accepted Answer · 2018-02-26 13:00:42Z

1

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>

answered Feb 26, 2018 at 13:00

Libin C Jacob

1,1381 gold badge13 silver badges38 bronze badges

4 Comments

vijesh Over a year ago

Great job. This is the correct way to implement this

joepil Over a year ago

When I try this out on my own pc , and I run the page it starts with all 3 tables instead of table 1

Libin C Jacob Over a year ago

Pls make all the tables hide except the tables1 initially. For that you can use the inline style "display:none" to those tables otherwise use a common class too. I've clearly mentioned this statement in my answer too.

joepil Over a year ago

Thanks for answering, and sorry that I didnt see it before I posted, but i already found it out. But i have another question I used this piece of code now in my own project but when I use datatables plugin it keeps giving me search bar/ show entries etc from the other tables , I can even use them to search in those tables but not see them. You know a solution for this? imgur.com/a/kvT4c

Collectives™ on Stack Overflow

How to view multiple tables through dropdown menu?

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related