Filtering a PHP table using dropdown in html

Viewed 49

I want to filter the table that I created using PHP in my code. What I want is a dropdown filter that will filter the contents of the table according to the option you select. This is an image of my table and the dropdown that I want to use.

Picture of the table and dropdown

I don't have any idea on doing that since most of the things I researched was only for html. This is my code for the dropdown and the table.

<select id="mylist" class="dropdown-filter">
  <option>Any</option>
  <option>Regular</option>
  <option>Dealer</option>
  <option>Refill</option>
</select>

<table class="table datatable text-center" id="transaction-table">
  <thead>
    <tr>
      <th class="text-center">Customer</th>
      <th class="text-center" style="pointer-events: none;">Transaction </th>                      
      <th class="text-center">Time</th>
      <th class="text-center">Item</th>
      <th class="text-center">Quantity</th> 
      <th class="text-center">Total</th>
      <th class="text-center">Returned</th>  
      <th class="text-center">Damaged</th>
      <th class="text-center" style="pointer-events: none;">Action</th>
    </tr>
  </thead>
  <tbody>  
  <?php
    $result = mysqli_query($connections, "SELECT * FROM transac_tbl ORDER BY transac_time DESC");
    if ($result) {
      while ($row = mysqli_fetch_assoc($result)) {
        $TransactionID = $row['transac_id'];
        $Customer = $row['customer'];
        $Transaction = $row['transac_type'];
        $Time = $row['transac_time'];
        $Item = $row['item'];
        $Quantity = $row['quantity'];
        $TotalPrice = $row['total_price'];
        $Returns = $row['gal_return'];
        $Damaged = $row['damaged'];
        $Status = $row['status'];
    
        if ($Transaction == 0) {
          $Transaction1 = "Dealer";
        } elseif ($Transaction == 1) {
          $Transaction1 = "Regular";
        } else {
          $Transaction1 = "Refill";
        }
    
        if ($Item == 0) {
          $Item1 =  "Slim";
        } else {
          $Item1 = "Round";
        }
    
        echo '<tr>
              <td>'.$Customer.'</td>
              <td>'.$Transaction1.'</td>
              <td>'.date_format(new DateTime($Time), 'F d, Y | h:i A').'</td>
              <td>'.$Item1.'</td>
              <td>'.$Quantity.'</td>
              <td>'.$TotalPrice.'</td>
              <td>'.$Returns.'</td>';
    
        if ($Damaged != 0) {
          echo '<td><span class="badge bg-danger">'.$Damaged.'</span></td>';
        } else {
          echo '<td>None</td>';
        }
    
        if ($Status == 0) {
          echo '<td><button class="btn btn-dark" type="button" data-bs-toggle="modal" data-bs-target="#verticalycentered" style="margin: 3px; font-size: 13px; padding: 3px 5px; min-width: 50px;">Void</button></td>;
        } else {
          echo '<td><span class="badge bg-success">Voided</span></td>';
        }
      }
    }
  ?>

P.S Sorry for the long code, I'm still studying and uses many inefficient methods

1 Answers

It depends on how you want to implement the feature, front-end or back-end. You have to decide that based on factors like your data, implementation, load speed consideration, filter speed consideration, pagination etc.

1. Front End: You can use libraries like Datatables and create custom filters according to your need. This will filter your table based on data available on page.

Note: In case you have backend based pagination, you have to opt for backend filtering to get data beyond the current page.

2. Backend: You can use ajax/forms etc. to communicate with backend (PHP in this case) and get filtered data.

Related