Autor Tema: Filtrar resultados con paginación php sin recargar la página (ajax o javascript)  (Leído 10651 veces)

nikpaolillo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 1
    • Ver Perfil
Buenas, les paso a detallar mi problema:

Tengo listada una base de datos en forma de tablas con paginacion, una columna es CATEGORIA, yo quiero hacer un buscador por categoria que al seleccionar el numero aparescan solamente los resultados con esa categoria, pero en la misma pagina, no que se abra otro php, estoy buscando y intentando hace dias pero no doy con la solucion, desde ya gracias!

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Buscate Un Padel</title>
<link rel="stylesheet" type="text/css" href="partido.css"/>
</head>
<body>

<div id="contenedor">


<nav>
<a href="index.php" class="linknav">Inicio</a> |
<a href="registro.php" class="linknav">Registrate</a> |
<a href="" class="linknav">Buscar Partido</a>
</nav>

<div id="cuerpo">

<?php //conexion a la base de datos $host="localhost"; $user="root"; $pass="kavetoda31"; $db="padel"; $tabla="PAREJAS"; //conectamos con la base de datos $con=mysql_connect($host,$user,$pass); mysql_select_db($db,$con); //establecemos condiciones de paginacion $registros = 7; @$pagina = $_GET ['pagina']; if (!isset($pagina)) { $pagina = 1; $inicio = 0; } else { $inicio = ($pagina-1) * $registros; } //realizamos la busqueda en la base de datos $pegar = "SELECT * FROM $tabla ORDER BY ID ASC LIMIT ".$inicio." , ".$registros." "; $cad = mysql_query($pegar,$con) or die ( 'error al listar, $pegar' .mysql_errno()); //calculamos las paginas a mostrar $contar = "SELECT * FROM $tabla"; $contarok = mysql_query($contar,$con); $total_registros = mysql_num_rows($contarok); //$total_paginas = ($total_registros / $registros); $total_paginas = ceil($total_registros / $registros); //imprimiendo los resultados echo '<table border="1"">'; echo '<tr><th>Drive</th>'; echo '<th>Reves</th>'; echo '<th>Facebook</th>'; echo '<th>Categoria</th>'; echo '<th>Zona</th></tr>';while ($array = mysql_fetch_array($cad)) { echo '<tr>'; echo '<td>'.$array['NOMBREDRIVE']. '</td>'; echo '<td>'.$array['NOMBREREVES']. '</td>'; echo '<td>'.$array['FACEBOOK']. '</td>'; echo '<td>'.$array['CATEGORIA']. '</td>'; echo '<td>'.$array['ZONA']. '</td>'; echo '</tr>';} /* ==============================================*/ //creando los enlaces de paginacion de resultados echo "<center><p>"; if($total_registros>$registros){ if(($pagina - 1) > 0) { echo "<span class='pactiva'><a href='?pagina=".($pagina-1)."'>&laquo; Anterior</a></span> "; } // Numero de paginas a mostrar $num_paginas=50; //limitando las paginas mostradas $pagina_intervalo=ceil($num_paginas/2)-1; // Calculamos desde que numero de pagina se mostrara $pagina_desde=$pagina-$pagina_intervalo; $pagina_hasta=$pagina+$pagina_intervalo; // Verificar que pagina_desde sea negativo if($pagina_desde<1){ // le sumamos la cantidad sobrante para mantener el numero de enlaces mostrados $pagina_hasta-=($pagina_desde-1); $pagina_desde=1; } // Verificar que pagina_hasta no sea mayor que paginas_totales if($pagina_hasta>$total_paginas){ $pagina_desde-=($pagina_hasta-$total_paginas); $pagina_hasta=$total_paginas; if($pagina_desde<1){ $pagina_desde=1; } } for ($i=$pagina_desde; $i<=$pagina_hasta; $i++){ if ($pagina == $i){ echo "<span class='pnumero'>".$pagina."</span> "; }else{ echo "<span class='pactiva'><a href='?pagina=$i'>$i</a></span> "; } } if(($pagina + 1)<=$total_paginas) { echo " <span class='pactiva'><a href='?pagina=".($pagina+1)."'>Siguiente &raquo;</a></span>"; } } echo "</p></center>"; ?>


<form method="post">

<select name="categoria" action="partido.php">

<option value="0">Seleccione una categoria</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>

</select>

<input type="submit" value="Buscar"/>


</form>

</div>

<table>

</div>
</body>
</html>
« Última modificación: 15 de Julio 2015, 19:36 por César Krall »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2664
    • Ver Perfil
Re:Buscador base de datos
« Respuesta #1 en: 12 de Julio 2015, 12:40 »
Hola nikpaolillo, la forma de hacerlo que se me ocurre es la siguiente: una vez tienes cargados los datos hacer el buscador basándote en JavaScript: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

De este modo no tendrías que recargar para hacer el filtrado.

Tendrías que estructurar los datos y usando un condicional JavaScript hacer que se oculten aquellos datos que no cumplan con el criterio de filtrado.

Para poder identificar los elementos a ocultar deberías asignar un id ó class que te permita identificar las filas de la tabla, e igualmente identificar las celdas donde tienes la categoría, que son las que te van a permitir filtrar.

Si mira este ejemplo te puede servir de orientación: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=819:ejemplo-innerhtml-javascript-ejercicio-resuelto-modificar-campos-de-tabla-dinamica-editar-filas-cu01139e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

Otra forma habitual de hacer esto es usando Ajax, donde digamos que podrías realizar una nueva consulta sql en segundo plano y re-mostrar los resultados sin que se aprecie recarga de la página.

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".