Fallo en paginación por Ajax tipo Twitter o Facebook.

iEnrique · #1 (**permalink**) 05/09/2013, 10:30

Hola a todos:
Estoy haciendo una web en la que estoy haciendo una paginación a través de Ajax. La estoy haciendo tipo Twitter y Facebook por lo que al pulsar un botón con la id "mostrar-mas" mostraría 10 posts

más a partir de los que ya hay.

Lo que me he inventado (que no sé si funciona) es que al pulsar el botón, a la variable "partir", se le sume 10 ya que eso se lo pasamos a "paginacion.php" que es el que hace un while para decirle por

ejemplo en este caso, que empieze por diez y que si se le volviera a pulsar, como antes se le sumo 10, se le sumarían otros 10 y se quedaría en 20 y se empezaría a contar desde 20 y así. Después la

función accionMostrar() hace el paso de los datos a la página y para procesar los datos, inventé que dentro de un div que ya existe con la id "mas" se le añadiera otro div con la id que cambiaría cada

vez que se pulsara el boton a "posts10", "posts20",... y en esos poner el contenido de los 10 posts siguientes y así en cada uno de ellos.

No se me ocurrió hacerlo de otra forma. De todas formas les dejo los codigos para que los vean:

index.php

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>Paginación</title>
    <meta charset="utf-8">
    <script>
        addEvent(window,'load',inicializarEventos,false);
        function inicializarEventos()
        {
            var ob = document.getElementById('mostrar-mas');
            addEvent(ob,'click',presionMostrar,false);
        }
        var partir;
        function presionMostrar(e){
          partir = partir + 10;
          accionMostrar();
        }
        var conexion1;
        function accionMostrar() 
        {
          conexion1=crearXMLHttpRequest();
          conexion1.onreadystatechange = procesarEventos;
          conexion1.open("GET", "paginacion.php?partir="+partir, true);
          conexion1.send(null);
        }
 
        var numDiv;
        function procesarEventos()
        {
            numDiv = numDiv + 10;
            var vec = documento.getElementById('mas');
            vec.appendChild(document.createElement('div').setAttribute('id', "posts"+numDiv));
          if(conexion1.readyState == 4)
          {
            var detalles = document.getElementById("posts"+numDiv);
            detalles.innerHTML = conexion1.responseText;
          } 
          else 
          {
            var detalles = document.getElementById("posts"+numDiv);
            detalles.innerHTML = 'Cargando...';
          }
        }
 
        //***************************************
        //Funciones comunes a todos los problemas
        //***************************************
        function addEvent(elemento,nomevento,funcion,captura)
        {
          if (elemento.attachEvent)
          {
            elemento.attachEvent('on'+nomevento,funcion);
            return true;
          }
          else  
            if (elemento.addEventListener)
            {
              elemento.addEventListener(nomevento,funcion,captura);
              return true;
            }
            else
              return false;
        }
 
        function crearXMLHttpRequest() 
        {
          var xmlHttp=null;
          if (window.ActiveXObject) 
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
          else 
            if (window.XMLHttpRequest) 
              xmlHttp = new XMLHttpRequest();
          return xmlHttp;
        }
    </script>
    <style>
        body{
            font-family: Verdana;
            font-size:14px;
        }
        table{
            border:1px solid #ccc;
        }
        .mensaje{
            background-color:#f5f5f5;
            padding:10px;
        }
        .id{
            text-align:center;
            background-color:#eee;
            padding:5px;
        }
    </style>
</head>
<body>
<table width="100%">
<thead>
    <tr>
        <th width="5%" class="id">ID</th>
        <th class="mensaje">Mensaje</th>
    </tr>
</thead>
<tbody>
    <?php
    $dsn = 'mysql:dbname=reg_users;host=localhost';
    $usuario = 'root';
    $contraseña = '';
   
    try {
    $gbd = new PDO($dsn, $usuario, $contraseña);
    } catch (PDOException $e) {
    exit('Se ha producido un error imposible continuar x0215484.');
    }
    
    $selecposts=$gbd->prepare("SELECT * FROM posts ORDER BY id DESC LIMIT 10");
    $selecposts->execute();
    $num = 0;
    while($post=$selecposts->fetch(PDO::FETCH_ASSOC)){
    $num++;
    ?>
    <tr>
        <td width="5%" class="id"><?php echo $num; ?></td>
        <td width="95%" class="mensaje"><?php echo $post['post']; ?></td>
    </tr>
    <?php } ?>
</tbody>
</table>
<div id="mas"></div>
<button id="mostrar-mas">Mostrar más</button>
</body>
</html>

paginacion.php

Código PHP:

Ver original<?php
    $dsn = 'mysql:dbname=reg_users;host=localhost';
    $usuario = 'root';
    $contraseña = '';
   
    try {
    $gbd = new PDO($dsn, $usuario, $contraseña);
    } catch (PDOException $e) {
    exit('Se ha producido un error imposible continuar x0215484.');
    }
    
    $partir = $_GET['id'];
    
    $selecposts=$gbd->prepare("SELECT * FROM posts ORDER BY id DESC LIMIT ".$partir.",10");
    $selecposts->execute();
    $num = 0;
    while($post=$selecposts->fetch(PDO::FETCH_ASSOC)){
    $num++;
    ?>
    <tr>
        <td width="5%" class="id"><?php echo $num; ?></td>
        <td width="95%" class="mensaje"><?php echo $post['post']; ?></td>
    </tr>
    <?php }
?>