Mostrar datos y filtrarlos (Sin recargar página)

En una entrada anterior, les mostré como filtrar una tabla que viene desde una base de datos, recargando la página.

Esto es mas sencillo de realizar pero puede ser incómodo sobre todo si hay muchos registros.

Ahora les mostraré como lo hago yo para filtrar entradas de la tabla, sin recargar página, usando ajax.

Para el caso ejemplo usaremos la siguiente base de datos:
nombre: usuarios

Primero, asignaré un id único a cada fila (<tr>) de la tabla, en este caso el id de la fila será el mismo que el id de usuario mas la palabra "tr_". 

Ya no es necesario abrir un tag <form> ya que le daremos al select box un id, así podemos acceder a su valor desde una función javascript usando jquery, la notación es: $("#id_objeto").val().

Luego, enviaremos con ajax, este valor a un archivo php que procesara el filtro y me enviará de vuelta los "id" de los registros que cumple con el filtro y mostraremos solo estos, y ocultaremos los que no cumplen.

Para que jQuery funcione en nuestra web, necesitamos incluir la librería, esto se hace con la siguiente linea:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Para hacer todo esto necesitamos 2 archivos, el que envía y muestra los datos y el que recibe y procesa por detrás.

El que envía y muestra los datos queda:

<?php 
include("config.php");
?>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<h3>Filtrar por estado civil</h3>


    <select id="filtro">
        <option value="Casado">Casado</option>
        <option value="Soltero">Soltero</option>
    </select>
    <br><br>
    <input type="button" onclick="filtrar()" name="filtrar" value="Filtrar">




<br><br>
<table border="1">
    <tr>
        <td>Id Usuario</td>
        <td>Nombre y Apellido</td>
        <td>Edad</td>
        <td>Estado Civil</td>
    </tr>
    <?php
    $sql = mysqli_query($link, "SELECT * FROM usuarios");
    
    if(mysqli_num_rows($sql) > 0)
    {
        
        while($row = mysqli_fetch_array($sql))
        {
            echo "<tr id='tr_".$row['id_usuario']."'>";
            echo "<td>".$row['id_usuario']."</td>";
            echo "<td>".$row['nombre']."</td>";
            echo "<td>".$row['edad']."</td>";
            echo "<td>".$row['estado_civil']."</td>";
            echo "</tr>";
        }
    } ?>
</table>

<script>

function filtrar()
{
    //de esta forma se accede a un valor con jquery, en donde "filtro" es el id del input
    var filtro = $("#filtro").val();
    $.post(
        "filtrar.php",
        {
            fil: filtro
        },
        function(data, status)
        {
            if(status=='success')
            {
                console.log(data);
                var response = JSON.parse(data);
                if(response.mostrar.length != 0)
                {
                    
                    for(var y = 0; y < response.mostrar.length; y++)
                    {
                        $("#tr_"+response.mostrar[y]).slideDown();
                        $("#tr_"+response.ocultar[y]).slideUp();
                    }
                }
                else
                {
                    alert("No hay usuarios con ese filtro");
                }
            }
        }
    );
}

</script>

El archivo "filtrar.php" que es quien recibe el filtro y procesa la consulta queda:

<?php
include("config.php");

$filtro = $_POST['fil'];

$mostrar = array();
$ocultar = array();

$sql = mysqli_query($link, "select * from usuarios");
if( mysqli_num_rows($sql) > 0 )
{
    while( $row = mysqli_fetch_array($sql) )
    {
        
        if( $row['estado_civil'] == $filtro )
        {
            
            array_push( $mostrar, $row['id_usuario'] );
        }
        else
        {
            array_push( $ocultar, $row['id_usuario'] );
        }
    }
    $json = array("mostrar" => $mostrar, "ocultar" => $ocultar);
}
else
{
    $mostrar = "";
    $ocultar = "";
    $json = array("mostrar" => $mostrar, "ocultar" => $ocultar );
}
echo json_encode($json);

Para ver funcionando este código accede aquí


Gracias por leer ^^