HTML de nuestro slider de rangos
Este código HTML contiene un contenedor que será reemplazado por nuestro slider de rangos. Con la referencia de este elemento, llamaremos al slider de jQuery UI para mostrar el slider con los rangos min-max por defecto. Como he comentado antes, al arrastrar los controladores de mínimo y máximo, se actualizarán los valores de las cajas de texto.
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="form-price-range-filter">
<form method="post" action="">
<div>
<input type="" id="min" name="min_price"
value="<?php echo $min; ?>">
<div id="slider-range"></div>
<input type="" id="max" name="max_price"
value="<?php echo $max; ?>">
</div>
<div>
<input type="submit" name="submit_range"
value="Filter Product" class="btn-submit">
</div>
</form>
</div>
Código para filtrar los productos en la base de datos basándonos en el rango de precios
Este código PHP recibe un rango de precio con un mínimo y un máximo a través del campo input que hemos definido en nuestro formulario HTML. Mediante estos rangos, crearemos nuestra query para filtrar la información de los productos de nuestra base de datos. Una vez hecho esto, recorreremos el array y mostraremos los productos en una tabla HTML.
<?php
$conn = mysqli_connect("localhost", "root", "test", "phpsamples");
$result = mysqli_query($conn, "select * from tbl_product where price BETWEEN '$min' AND '$max'");
$count = mysqli_num_rows($result);
if ($count > 0) {
?>
<hr>
<div class="container">
<table class="tutorial-table" cellspacing="1px" width="100%">
<tr>
<th>Product name</th>
<th>Code</th>
<th class="text-right">Price (in $)</th>
</tr>
<?php
while ($row = mysqli_fetch_array($result)) {
?>
<tr>
<td><img class="product-thumb" src="<?php echo $row['image']; ?>" /><?php echo $row['name']; ?></td>
<td><?php echo $row['code']; ?></td>
<td class='text-right'><?php echo $row['price']; ?></td>
</tr>
<?php
} // end while
} else {
?>
<div class="no-result">No Results</div>
<?php}
mysqli_free_result($result);
mysqli_close($conn);
echo $output;
?>
0 Comentarios