Jquery Button to toggle sql results

Question

I have a table in the database(myTable) listed as such

**Color**          **State**           **Fruit**
  Red                Idaho               Plum
  Blue               Kentucky            Orange
  Yellow             Florida             Cherry
  Green              Hawaii              Apple
  Red                Michigan            grape
  Blue               Alabama             Bannana
  Red                Nevada              Apple

I have JQuery Buttons on HTML page where if you click a button it toggles a table that displays the above information

<button type="button" class="btn btn-primary" id="button" value="Toggle table">Red Colors</button>
<button type="button" class="btn btn-primary">Blue Colors</button>
<button type="button" class="btn btn-primary">Yellow Colors</button>
<button type="button" class="btn btn-primary">Orange Colors</button>
<button type="button" class="btn btn-primary">Green Colors</button>
<div class="container">
<table class="table" id="table">
  <thead>
    <tr>
    <th>Color</th>
    <th>State</th>
    <th>Fruit</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Red</td>
    <td>Idaho</td>
    <td>Plum</td>
  </tr>
  <tr>
    <td>Blue</td>
    <td>Kentucky</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Yellow</td>
    <td>Florida</td>
    <td>Cherry</td>
  </tr>
  <tr>
    <td>Green</td>
    <td>Hawaii</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Red</td>
    <td>Michigan</td>
    <td>grape</td>
  </tr>
  <tr>
    <td>Blue</td>
    <td>Alabama</td>
    <td>Bannana</td>
  </tr>
  <tr>
    <td>Red</td>
    <td>Nevada</td>
    <td>Apple</td>
  </tr>
</tbody>
</table>
</div>

CSS

#table{
    display: none;
}

Script

$(document).ready(function()
{
    $("#button").click(function()
    {
        $("#table").toggle();
    });
});

What i want to happen is i click on the red colors button and a table will show up displaying only the entries with red in its first column. Click on the Blue button that table only displays items with Blue in the Color Column.

I know the sql will go something like this

SELECT * FROM myTable WHERE color =""

Can you share your back end that will fetch data from sql table? — Mayank Patel
– Mayank Patel, Commented Jun 29, 2017 at 6:08
Do you want to write code for you? What you have done in Server side? — Pankaj Makwana
– Pankaj Makwana, Commented Jun 29, 2017 at 6:09

Oleg Imanilov · Accepted Answer · 2017-06-29 06:22:57Z

1

In case the table is not very big. You may always get all rows from the server, than filter it on front end. For example add marker class to every tr than hide/show it.

<table>
  ...
  <tr class='my-red'>
    <td>Red</td>
    <td>Idaho</td>
    <td>Plum</td>
  </tr>
  ...
</table>
<button class='toggle-red'>Toggle Red</button>

JS

var redIsOn = true;  
function toggleRed(){
  redIsOn = !redIsOn; 
  $(".my-red").css('display',redIsOn?'block':'none');
}

$(document).ready(function(){
  $(".toggle-red").on('click',toggleRed);
});

answered Jun 29, 2017 at 6:22

Oleg Imanilov

2,7791 gold badge17 silver badges28 bronze badges

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

Comments

Gokulan P H · Accepted Answer · 2017-06-29 06:53:37Z

HTML:

<button type="button" class="btn btn-primary" id="red" value="Toggle table">Red Colors</button>
<button type="button" class="btn btn-primary" id="blue">Blue Colors</button>
<div class="container">
<table class="table" id="table">
  <thead>
    <tr>
    <th>Color</th>
    <th>State</th>
    <th>Fruit</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Red</td>
    <td>Idaho</td>
    <td>Plum</td>
  </tr>
  <tr>
    <td>Blue</td>
    <td>Kentucky</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Yellow</td>
    <td>Florida</td>
    <td>Cherry</td>
  </tr>
  <tr>
    <td>Green</td>
    <td>Hawaii</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Red</td>
    <td>Michigan</td>
    <td>grape</td>
  </tr>
  <tr>
    <td>Blue</td>
    <td>Alabama</td>
    <td>Bannana</td>
  </tr>
  <tr>
    <td>Red</td>
    <td>Nevada</td>
    <td>Apple</td>
  </tr>
</tbody>
</table>
</div>

JS:

$(document).ready(function()
{
    $("#red").click(function()
    {
     $('tbody tr:not(:contains("Red"))').not().toggle();   
    });

     $("#blue").click(function()
    {
       $('tbody tr:not(:contains("Blue"))').not().toggle();   
    });
});

Working Fiddle: https://jsfiddle.net/7qbt2voj/

HEGDE · Accepted Answer · 2017-06-29 13:01:29Z

1

I have created a fiddle here which will flip the table based on color of button chosen. As of now it is working only on first two button. rest can be allied similarly

here is the JS FIDDLE

Code is changed at

$("#btn_Blue").click(function() {

On the contrary if you are using sql to get table data in jquery you can follow this :

replacing color in script with your sql data here is the supporting fiddle : JS FIDDLE

edited Jun 29, 2017 at 13:01

answered Jun 29, 2017 at 12:45

HEGDE

5115 silver badges18 bronze badges

Collectives™ on Stack Overflow

Jquery Button to toggle sql results

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related