Problemita con Script de paginación

Jackass89 · 16 Jun 2014

Hola, Betas!!, estoy haciendo una paginación en Bootstrap y tengo el siguiente problema.

Insertar CODE, HTML o PHP:

<div id="content">
	<div class="panel">hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola.</div>
	<div class="panel">hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola.</div>
	<div class="panel">hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola.</div>
	<div class="panel">hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola.</div>
	<div class="panel">hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola.</div>
    <div class="panel">hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola.</div>
	<div class="panel">hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola.</div>
    <div class="panel">hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola.</div>
	<div class="panel">hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola.</div>
    <div class="panel">hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola, hola.</div>
	<a href="Link/To/Next/Page" class="nextPage">Next</a>
</div>

<script type="text/javascript">
  $(function() {
    $('#content').AutoPagination({
        nextPageBufferPx: 200,
        nextPageSelector: '.nextPage',
        panelSelector: '.panel',
        loaderDivClass: 'ajax-loader',
        loaderDivStyle: 'text-align:center',
        loaderImage: 'pag/img/ajax-loader.gif',
        loaderText: 'Loading...'
    });
});
</script>

No logro darme cuenta como hacer para cambiar la cantidad de Div`s que me tiene que mostrar antes de aparecer "Load more".
¿Alguien podría ayudarme?, ya estuve googleando pero no encuentro nada :/

hugo1 · 16 Jun 2014

Lo que hace ese plugin es agregar el contenido nuevo después del último <div class="panel"></div>.

Tienes que usar el href de .nextPage de esta manera:

PHP:

<a href="index.php?pagina=<?php echo ($_GET['pagina']+20); ?>" class="nextPage">Next</a>

NO! tienes que crear otro archivo para generar el contenido.

De esta forma paginas con "SELECT contenido FROM tabla WHERE 1 LIMIT ". $_GET['pagina'] .", 20"

Jackass89 · 16 Jun 2014

hugo1 dijo:
Lo que hace ese plugin es agregar el contenido nuevo después del último <div class="panel"></div>.

Tienes que usar el href de .nextPage de esta manera:

PHP:

<a href="index.php?pagina=<?php echo ($_GET['pagina']+20); ?>" class="nextPage">Next</a>

NO! tienes que crear otro archivo para generar el contenido.

Gracias por responder!!, pero usé el href de esa manera y por alguna razón no funciona 🙁
(sutituí "index.php" por el nombre de la página en la que estoy trabajando XD)

nullPointer · 16 Jun 2014

Hola Jackass89,

Creo que para cambiar el número de Divs a mostrar, tienes que cambiar la propiedad nextPageBufferPx del objeto que se le pasa al método Autopagination.

Por lo que veo en el código fuente del plugin (Código fuente - Plugin jquery-auto-pagination), ese atributo define el alto (height) máximo que debe recorrer el scroll antes de mostrar el siguiente contenido.

Prueba a modificar el valor de ese atributo y nos cuentas qué tal.

Un saludo.

😉

Edito!!
Aquí tienes una página demo. Échale un ojo al código fuente:
- Página demo Autopagination

Un saludo.
😉

hugo1 · 16 Jun 2014

Con este ejemplo entenderas.

demo.php

PHP:

<div id="content">
  <?php
  $_GET['pagina'] = isset($_GET['pagina']) ? $_GET['pagina'] : 1;
  
  if ( $_GET['pagina'] == 1 )
  {
      for($i=1; $i<40; $i++)
      {
          echo '<div class="panel">Lleva el scroll hasta abajo!</div>';
      }
  }
  
  echo '<div class="panel">'. $_GET['pagina'] .'</div>';
  ?>
  <a href="demo.php?pagina=<?php echo $_GET['pagina']+1; ?>" class="nextPage">Next</a>
</div>

<script type="text/javascript">
$(function() {
  $('#content').AutoPagination({
	  nextPageBufferPx: 200,
	  nextPageSelector: '.nextPage',
	  panelSelector: '.panel',
	  loaderDivClass: 'ajax-loader',
	  loaderDivStyle: 'text-align:center',
	  loaderImage: 'pag/img/ajax-loader.gif',
	  loaderText: 'Loading...'
  });
});
</script>

Problemita con Script de paginación

Jackass89

hugo1

Jackass89

nullPointer

hugo1

Temas similares