Paginar con imagenes en lugar de números

[marco64yes]

Hola que tal, tengo una duda amigos:


En cuestion de la paginación, tendran algun ejemplo de como paginar PERO no con los clasicos numeros en la parte inferior de lo que se tenga mas bien:

(imagen anterior) << IMAGEN >> (imagen posterior)

Como se hará algo así ?

saludos!

[RollerSky]

hola..
jejeje pues es exactamente igual con el clasico ejemplo de la paginacion..



solo que reemplazas los numeros por imagenes..

postea algun codigo que te funcione y que entiendas de paginación y te ayudo con lo de las imagenes..

saludos!

[marco64yes]

Iniciado por RollerSky

hola..
jejeje pues es exactamente igual con el clasico ejemplo de la paginacion..



solo que reemplazas los numeros por imagenes..

postea algun codigo que te funcione y que entiendas de paginación y te ayudo con lo de las imagenes..

saludos!

Jajajaaaaaaaaa tienes toda la razón,

[marco64yes]

Iniciado por RollerSky

hola..
jejeje pues es exactamente igual con el clasico ejemplo de la paginacion..



solo que reemplazas los numeros por imagenes..

postea algun codigo que te funcione y que entiendas de paginación y te ayudo con lo de las imagenes..

saludos!

Yo uso la calse PHPPaging.lib , se las recomiendo está muy practica.. pero no se acoplaria a esto..

no tendras uno que me puedas proporcionar ?

saludos!

[pabloaguero2010]

integra esto en tu php y tendras paginacion y filtro multicolumna.

Código:

$(document).ready(function($){
	$('#CAPA_A_MOSTRAR').dataTable(
			{"bJQueryUI": true,
			"sPaginationType": "full_numbers"
			})
      });

[RollerSky]

$(document).ready(function($){
$('#CAPA_A_MOSTRAR').dataTable(
{"bJQueryUI": true,
"sPaginationType": "full_numbers"
})
});

bueno aunque esto es Javascript( Jquery), te puede servir pero si lo que quieres es con PHP

aqui te dejo una clase que "hice yo"

Código PHP:

  <?php 
 
CopyRight: Armando Herrera 
class paginador extends conexion { 
 
    var $numRegistros = 10; 
    var $inicio          = 0; 
    var $totalRegistros; 
    var $totalPaginas; 
    var $conexion; 
    var $query = NULL; 
    var $pagina; 
    var $tagSiguiente = "&raquo;"; 
    var $tagAtras       = "&laquo;"; 
    var $v_datos; 
    var $variablesGet; 
     
    function __construct($cnx){ 
        $this->conexion = $cnx; 
    }  
 
    function totalRegistros(){ 
        $this->conexion->ejecutarConsulta($this->query); 
        $this->totalRegistros = $this->conexion->numRows(); 
    } 
     
    public function totalPaginas(){ 
        if($this->totalRegistros > 0){ 
            $this->totalPaginas = ceil($this->totalRegistros / $this->numRegistros); 
        }else{ 
            $this->totalPaginas = 1; 
        } 
    } 
     
    function paginar($query){ 
        if(empty($_GET[$this->pagina]) || !is_numeric($_GET[$this->pagina])){ 
            header("Location: ".$_SERVER['PHP_SELF']."?".$this->pagina."=1".$this->agregarGet()); 
            exit; 
        } 
        $this->query = $query; 
        $this->totalRegistros(); 
        $this->totalPaginas(); 
    } 
     
    function mostrarPaginacion(){ 
        if($this->totalRegistros) { 
            echo '<ul>'; 
            if(($_GET[$this->pagina] - 1) > 0) { 
                //echo "<li class=\"num\"><a href=\"?".$this->pagina."=".($_GET[$this->pagina]-1).$this->agregarGet()."\">".$this->tagAtras."</a></li>"; 
                echo "<li class=\"num\"><a href=\"".($_GET[$this->pagina]-1).$this->agregarGet()."\">".$this->tagAtras."</a></li>"; 
            } 
             
            for ($i=1; $i <= $this->totalPaginas; $i++){  
                if ($_GET[$this->pagina] == $i) { 
                    $temp[$i] =  "<li class=\"num\"><b>".$_GET[$this->pagina]."</b></li> ";  
                } else { 
                    //$temp[$i] =  "<li class=\"num\"><a href=\"?".$this->pagina."=".$i.$this->agregarGet()."\" >".$i."</a></li>"; 
                    $temp[$i] =  "<li class=\"num\"><a href=\"".$i.$this->agregarGet()."\" >".$i."</a></li>"; 
                }     
            } 
             
              echo implode("  ", $temp); 
             
            if(($_GET[$this->pagina] + 1)<=$this->totalPaginas) { 
                //echo "<li class=\"num\"><a href=\"?".$this->pagina."=".($_GET[$this->pagina]+1).$this->agregarGet()."\" >".$this->tagSiguiente."</a></li>"; 
                echo "<li class=\"num\"><a href=\""./*$this->pagina*/($_GET[$this->pagina]+1).$this->agregarGet()."\" >".$this->tagSiguiente."</a></li>"; 
            } 
            echo '</ul>'; 
        } 
    } 
     
    function agregarGet(){ 
         
        switch(func_num_args()){ 
            case 1:  
                foreach($this->variablesGet as $varGet) 
                    $get.= "&$varGet=".$GLOBALS[$varGet]; 
                return $get; 
                break; 
            default: 
             
                for($i = 0; $i < func_num_args(); $i++){ 
                    $this->variablesGet[] = func_get_arg($i); 
                } 
                break; 
        } 
    }  
     
    function mostrarContenido(){ 
        $this->inicio = ($_GET[$this->pagina]-1) * $this->numRegistros;  
        $nuevaConsulta = $this->query." LIMIT ".$this->inicio.",".$this->numRegistros; 
        $this->conexion->ejecutarConsulta($nuevaConsulta); 
    } 
     
     
    function vectorDatos(){ 
        $this->inicio = ($_GET[$this->pagina]-1) * $this->numRegistros;  
        $nuevaConsulta = $this->query." LIMIT ".$this->inicio.",".$this->numRegistros; 
        $this->conexion->ejecutarConsulta($nuevaConsulta); 
        if($this->totalRegistros > 0){ 
            $j = 0; 
            while($dt = $this->conexion->fetchAssoc()){ 
                $indices = array_keys($dt); 
                //echo $indices[0]; 
                for($i=0; $i<=count($indices); $i++){ 
                    $this->v_datos[$j][$indices[$i]] = $dt[$indices[$i]]; 
                } 
                $j++; 
            } 
            return $this->v_datos; 
        }else{ 
            return false; 
        } 
        return false; 
    } 
} 
?>   

y aqui la clase conexion!

Código PHP:

  class conexion{ 
    private $conexionId; 
    private $baseDatos; 
    private $servidor; 
    private $passwordBD; 
    private $usuarioBD; 
    private $consultaID; 
    private $error; 
     
    function conexion(){ 
        try{ 
            $this->baseDatos      = BD; 
            $this->servidor        = SERVIDOR_BD; 
            $this->usuarioBD     = USUARIO_BD; 
            $this->passwordBD    = PASSWORD_BD; 
             
        }catch(Exception $error){ 
            $this->error = $error->getMessage(); 
        } 
    } 
     
     function conectar(){ 
        try{ 
            $this->conexionId = @mysql_connect($this->servidor, $this->usuarioBD, $this->passwordBD); 
 
            if (!$this->conexionId) { 
                $this->error = "Error en la Conexion"; 
                return 0; 
            } 
 
            if (!@mysql_select_db($this->baseDatos, $this->conexionId)) { 
                $this->error = "Imposible abrir ".$this->baseDatos ; 
                return 0; 
            } 
        }catch(Exception $error){ 
            $this->error = $error->getMessage(); 
        } 
    return $this->conexionId; 
    } 
     
    function ejecutarConsulta($consulta){ 
        try{ 
            if($this->conectar()){ 
                if(!empty($consulta)){ 
                    $this->consultaID = @mysql_query(($consulta), $this->conexionId); 
                    $id =  mysql_insert_id(); 
                    $this->cerrarConexion(); 
                } 
            } 
        }catch(Exception $error){ 
        $this->error = $error->getMessage(); 
        } 
    return $id; 
    } 
     
    function fetchArray(){ 
        try{ 
            $array = @mysql_fetch_array($this->consultaID); 
        }catch(Exception $error){ 
            $this->error = $error->getMessage(); 
        } 
        return($array); 
    } 
     
   function numRows(){ 
        try{ 
            $array = @mysql_num_rows($this->consultaID); 
        }catch(Exception $error){ 
            $this->error = $error->getMessage(); 
        } 
        return($array); 
    } 
     
    function fetchAssoc(){ 
        try{ 
            $array = @mysql_fetch_assoc($this->consultaID); 
        }catch(Exception $error){ 
            $this->error = $error->getMessage(); 
        } 
        return($array); 
    } 
     
    private function cerrarConexion(){ 
        try{ 
            if ($this->conexionId) { 
                @mysql_close($this->conexionId); 
            } 
        }catch(Exception $error){ 
            $this->error = $error->getMessage(); 
        } 
    } 
}  
   

y aqui su uso:

Código PHP:

  //Ejemplo de su uso: 
 
 
require_once("Clase.conexion.php"); 
require_once("Clase.paginador.php"); 
$cnx = new conexion(); 
$q_noticias = "SELECT * FROM TABLA  ORDER BY fecha DESC"; 
 
$pg                 = new paginador($cnx); 
$pg->pagina         = "p"; //variable GET de paginacion 
$pg->numRegistros     = 5;  //Cantidad de registros 
$pg->paginar($q_noticias); 
$pg->mostrarContenido(); 
 
 
$pg->mostrarPaginacion(); //Esto p muestra la paginacion!  
   

[pabloaguero2010]

[QUOTE=RollerSky;3858829]bueno aunque esto es Javascript( Jquery), te puede servir pero si lo que quieres es con PHP


Si es javascript que se integra y funciona perfectamente con php

[marco64yes]

RollerSky mereces un aplauso de los Dioses

Que buen aportaso, si fuera taringa te dejaba 10 puntos JAJA

SALUDOS!!!

[pabloaguero2010]

Iniciado por marco64yes

RollerSky mereces un aplauso de los Dioses

Que buen aportaso, si fuera taringa te dejaba 10 puntos JAJA

SALUDOS!!!

Marco viste lo que te puse ?

[marco64yes]

Iniciado por pabloaguero2010

integra esto en tu php y tendras paginacion y filtro multicolumna.

Código:

$(document).ready(function($){
	$('#CAPA_A_MOSTRAR').dataTable(
			{"bJQueryUI": true,
			"sPaginationType": "full_numbers"
			})
      });

Pero como lo mi query ahi ? esque no le sé a jquery ,.. podrias poner un ejemplo de como unir esto con php ?
asi aprendemos todos, saludos!

[pabloaguero2010]

Luego añades jquery y los archivos que vienen incluidos

Añades la librerías necesarias que vienen con data tables

Código PHP:

  <script type="text/javascript"  src="js/dt/js/jquery.dataTables.js"></script> 
<link rel="stylesheet" type="text/css" href="js/smoothness/jquery-ui-1.8.4.custom.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="js/dt/css/demo_table_jui.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="js/dt/css/demo_table.css" media="screen" /> 
<script type="text/javascript">     
$(document).ready(function($){ 
    $('#listado').dataTable( 
            {"bJQueryUI": true, 
            "sPaginationType": "full_numbers" 
            }) 
      }); 
</script>  
  

Luego en el resultado de datos lo muestras en una capa

Código PHP:

  <div id="listado"> 
aqui va el listado 
</div>  
   

[marco64yes]

Iniciado por pabloaguero2010

Luego añades jquery y los archivos que vienen incluidos

Añades la librerías necesarias que vienen con data tables

Código PHP:

  <script type="text/javascript"  src="js/dt/js/jquery.dataTables.js"></script> 
<link rel="stylesheet" type="text/css" href="js/smoothness/jquery-ui-1.8.4.custom.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="js/dt/css/demo_table_jui.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="js/dt/css/demo_table.css" media="screen" /> 
<script type="text/javascript">     
$(document).ready(function($){ 
    $('#listado').dataTable( 
            {"bJQueryUI": true, 
            "sPaginationType": "full_numbers" 
            }) 
      }); 
</script>  
  

Luego en el resultado de datos lo muestras en una capa

Código PHP:

  <div id="listado"> 
aqui va el listado 
</div>  
   

Supongo que lo que incluyes

Código PHP:

  <script type="text/javascript"  src="js/dt/js/jquery.dataTables.js"></script>  
  

es para que funcione esto:

Código PHP:

  <script type="text/javascript">     
$(document).ready(function($){ 
    $('#listado').dataTable( 
            {"bJQueryUI": true, 
            "sPaginationType": "full_numbers" 
            }) 
      }); 
</script>  
  

o almenos que esto que pongo es = jquery.dataTables.js

Código PHP:

  <div id="listado">  
</div>  
   

no creo que

Código PHP:

  <script type="text/javascript">     
$(document).ready(function($){ 
    $('#listado').dataTable( 
            {"bJQueryUI": true, 
            "sPaginationType": "full_numbers" 
            }) 
      }); 
</script>  
  

Haga toda la magia

??? creo que es algun jquery que descargaste para paginar y te faltaron todos los complementos no jejeje ?

[pabloaguero2010]

todos esos componentes los tienes en el paquete
jquery datatables bajalo y miralo y veras que todo eso hace la magia

[pabloaguero2010]

A ver..

Código PHP:

  
--creamos la bd 
Create database demo; 
Use demo; 
 
--Creamos la tabla  
 
CREATE TABLE `usuarios` ( 
`id` INT(10) NULL AUTO_INCREMENT, 
`nom` VARCHAR(50) NULL, 
PRIMARY KEY (`id`) 
) 
COLLATE='utf8_general_ci' 
ENGINE=MyISAM 
ROW_FORMAT=DEFAULT 
--insertamos valores  
INSERT INTO `usuarios` (`nom`) VALUES ('pedro'); 
INSERT INTO `usuarios` (`nom`) VALUES ('maria'); 
 
Descargas el paquete jquerydatatables y jquery claro  
Y añades  jquery.dataTables.js 
•    jquery-ui-1.8.4.custom.css 
•    demo_table_jui.css 
•    demo_table.css 
•    inicializas jquery y añades :  
<script type="text/javascript">     
$(document).ready(function($){ 
    $('#listado').dataTable( 
            {"bJQueryUI": true, 
            "sPaginationType": "full_numbers" 
            }) 
      }); 
</script> 
 
 
<?php 
//conexion 
$cn="localhost"; 
$user="usuario"; 
$pass="clave"; 
$bd="demo"; 
$sql="SELECT * from usuarios;"; 
$consulta=mysql_query($sql,$cn) or die(mysql_error()); 
?> 
<table  id="listado"> 
<thead> 
  <tr> 
    <th>id</th> 
    <th>Nombres</th> 
  </tr> 
 </thead> 
 <tbody> 
<?php  
while($registro=mysql_fetch_array($consulta)) 
{ 
?>   
    <tr> 
    <td><?= $registro[0]; ?></td> 
    <td><?= $registro[1]; ?></td> 
  </tr> 
<?php 
} 
?>   
 <tbody>  
</table>  

[marco64yes]

Iniciado por pabloaguero2010

A ver..

Código PHP:

  
--creamos la bd 
Create database demo; 
Use demo; 
 
--Creamos la tabla  
 
CREATE TABLE `usuarios` ( 
`id` INT(10) NULL AUTO_INCREMENT, 
`nom` VARCHAR(50) NULL, 
PRIMARY KEY (`id`) 
) 
COLLATE='utf8_general_ci' 
ENGINE=MyISAM 
ROW_FORMAT=DEFAULT 
--insertamos valores  
INSERT INTO `usuarios` (`nom`) VALUES ('pedro'); 
INSERT INTO `usuarios` (`nom`) VALUES ('maria'); 
 
Descargas el paquete jquerydatatables y jquery claro  
Y añades  jquery.dataTables.js 
•    jquery-ui-1.8.4.custom.css 
•    demo_table_jui.css 
•    demo_table.css 
•    inicializas jquery y añades :  
<script type="text/javascript">     
$(document).ready(function($){ 
    $('#listado').dataTable( 
            {"bJQueryUI": true, 
            "sPaginationType": "full_numbers" 
            }) 
      }); 
</script> 
 
 
<?php 
//conexion 
$cn="localhost"; 
$user="usuario"; 
$pass="clave"; 
$bd="demo"; 
$sql="SELECT * from usuarios;"; 
$consulta=mysql_query($sql,$cn) or die(mysql_error()); 
?> 
<table  id="listado"> 
<thead> 
  <tr> 
    <th>id</th> 
    <th>Nombres</th> 
  </tr> 
 </thead> 
 <tbody> 
<?php  
while($registro=mysql_fetch_array($consulta)) 
{ 
?>   
    <tr> 
    <td><?= $registro[0]; ?></td> 
    <td><?= $registro[1]; ?></td> 
  </tr> 
<?php 
} 
?>   
 <tbody>  
</table>  

pues tengo esto:

Código PHP:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
        <title>DataTables unit test controller</title> 
        <script type="text/javascript"  src="/js/jquery.dataTables.js"></script>  
 
<script type="text/javascript">      
$(document).ready(function($){  
    $('#listado').dataTable(  
            {"bJQueryUI": true,  
            "sPaginationType": "full_numbers"  
            })  
      });  
</script>  
 
 
    </head> 
    <body> 
        <?php  
//conexion  
$conexion=mysql_connect("localhost","root",""); 
mysql_select_db("usuarios",$conexion);  
$sql="SELECT * from usuarios;";  
$consulta=mysql_query($sql,$conexion) or die(mysql_error());  
?>  
<table  id="listado">  
<thead>  
  <tr>  
    <th>id</th>  
    <th>Nombres</th>  
  </tr>  
 </thead>  
 <tbody>  
<?php   
while($registro=mysql_fetch_array($consulta))  
{  
?>    
    <tr>  
    <td><?php echo $registro[0]; ?></td>  
    <td><?php echo $registro[1]; ?></td>  
  </tr>  
<?php  
}  
?>    
 <tbody>   
</table>  
    </body> 
</html>  

y desacargue el DataTables-1.8.0.beta.3
tiene varios archivos,, encontre dentro del ="/js/jquery.dataTables.js este archivo
los demas que colcoas no los tiene, los cuales son solo para darle forma no ?

corri eso y solo obtengo lo de la base de datos jajaja

id Nombres
1 pedro
2 maria

ni paginacion ni nada :S

[pabloaguero2010]

mm veo no tienes mucha experiencia con jquery.
Tienes que descargarte la libreria jquery y añadirla tambien
y el resto de archivos esta dentro de
\DataTables-1.7.6\DataTables-1.7.6\media

[marco64yes]

Iniciado por pabloaguero2010

mm veo no tienes mucha experiencia con jquery.
Tienes que descargarte la libreria jquery y añadirla tambien
y el resto de archivos esta dentro de
\DataTables-1.7.6\DataTables-1.7.6\media

Pues bueno, se me queda de tarea ver como funciona esto, tambien para ir ganando experiencia en este tema..
Buen aporte, ya veré como esta este rollo jeje

saludos!