How to hide table rows that fetch the info from a database based on string given and when a button i-CodePudding

An HTML table is given in which there are people (agents in this case) who have the following information displayed Id, Name, Rank, Location, and Status. Status can have 3 values. Online, Offline, Disconnected. Based on the status that one of the agents has I want to put 3 buttons as such Online, Offline, and Disconnected, and when a button is pressed to hide the other rows with different values. For example, if I press Online, table rows on the HTML side that contain the status Offline and Disconnected disappear, this goes for the others too the other way around. I have no idea to achieve what I said earlier and I am open to any solution that is deemed to resolve my problem.

<table id="main_table">
      <tr>
        <td>Id</td>
        <td>Agent Name</td>
        <td>Agent Rank</td>
        <td>Agent Location</td>
        <td>Status</td>
      </tr>

      <?php

      require 'CMS/processing/conn.php';

      $result = mysqli_query($con,"SELECT * FROM agents");

      while($info = mysqli_fetch_array($result)) {
      ?>

      <tr>
        <td><?php echo $info['id']; ?></td>
        <td><?php echo $info['agentName']; ?></td>
        <td><?php echo $info['agentRank']; ?></td>
        <td><?php echo $info['locationNames']; ?></td>
        <td><?php echo $info['agentStatus']; ?></td>
      </tr>
    <?php
    }
    ?>
</table>

CodePudding user response：

I'd use javascript within a tag or jQuery since this sounds like you need dynamic functionality on a static webpage.

For your button pass in the name of the function you're creating inside your tag

<button onclick="yourFunctionName(yourString)"></button>

Inside your tag have the function accept the yourString paramater

function yourFunctionName(yourString){
  if(yourString === "whatever"){
  $('tbody tr').hide()   
  $('tbody tr').show()
 }

etc! Let me know if you need any more clarification on anything

CodePudding user response：

Output echo an attribute on each row <tr data-status="online"> etc. Then in script use document.querySelectorAll("tr[data-status='online'] to find all rows with that status, loop thru the array and toggle each row style.display to 'table-row' or 'none' as required.

You could also do the same using CSS by assigning a class <tr > etc. Then in script dynamically altering the CSS definition of that class, changing the display to 'table-row' or 'none' as required.

CodePudding user response：

Try using the below logic : Create 3 buttons with <a> and pass status value as GET to the same page then while fetching check whether it has GET or not

Note:This is not a answer :passing direct GET value to sql query may cause some security issues

<a href="?status=1" class="btn">Online</a>//put the status value based on your status
<a href="?status=2" class="btn">Offline</a>//put the status value based on your status
<a href="?status=3" class="btn">Disconnected</a>//put the status value based on your status

<table id="main_table">
      <tr>
        <td>Id</td>
        <td>Agent Name</td>
        <td>Agent Rank</td>
        <td>Agent Location</td>
        <td>Status</td>
      </tr>

      <?php

      require 'CMS/processing/conn.php';
    if(isset($_GET['status']))
    {
    $result = mysqli_query($con,"SELECT * FROM agents where agentStatus='".$_GET['status']."'");
    }
    else
    {
      $result = mysqli_query($con,"SELECT * FROM agents");
    }
      while($info = mysqli_fetch_array($result)) {
      ?>

      <tr>
        <td><?php echo $info['id']; ?></td>
        <td><?php echo $info['agentName']; ?></td>
        <td><?php echo $info['agentRank']; ?></td>
        <td><?php echo $info['locationNames']; ?></td>
        <td><?php echo $info['agentStatus']; ?></td>
      </tr>
    <?php
    }
    ?>
</table>