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.
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
