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!