Breaking

Post Top Ad

Your Ad Spot

jueves, 10 de mayo de 2018

Búsqueda por Rango de Precios utilizando jQuery Slider

Resultado de imagen para jquery

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
;
?>

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas