Autor Tema: Filtrar resultados con paginación php sin recargar la página (ajax o javascript)  (Leído 9354 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: 2660
    • 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".