jquery - for - scroll infinito ejemplo

Laravel e Infinite Scroll

Question

Tengo una pregunta sobre la paginación laravel y el desplazamiento infinito:

Primero que nada, tengo esto:

<div class="row">
<div id="boxes">
@forelse($duels->results as $d)
<div class="col-span-4 box notizy">
@include(''versus.versus'')
</div>
@empty
@endforelse
</div>
<div class="col-span-12">
<div class="paginate text-center">
{{$duels->links()}}
</div>
</div>

Como podemos ver, tengo un div #boxes que contiene divs .box. La Laravel establece la paginación y se ve así:

<div class="col-span-12">
<div class="paginate text-center">
<div class="pagination">
<ul>
<li class="previous_page disabled"><a href="#">&laquo; Previous</a></li>
<li class="active"><a href="#">1</a></li> <li><a href="index.php?page=2">2</a></li>
<li class="next_page"><a href="index.php?page=2">Next &raquo;</a></li>
</ul>
</div>
</div>
</div>

Así que ahora, quiero poner un desplazamiento infinito en lugar de una paginación. ¿Cómo debo hacer uso de https://github.com/paulirish/infinite-scroll ?

Me quedo aquí si tienes preguntas!

PD: He intentado algunas cosas, pero ninguna funcionó como:

 $(''#boxes'').infinitescroll({
loading: {
finished: undefined,
finishedMsg: "<em>Congratulations, you''ve reached the end of the internet.</em>",
msg: null,
msgText: "<em>Loading the next set of posts...</em>",
selector: null,
speed: ''fast'',
start: undefined
},
state: {
isDuringAjax: false,
isInvalidPage: false,
isDestroyed: false,
isDone: false, // For when it goes all the way through the archive.
isPaused: false,
currPage: 1
},
debug: false,
behavior: undefined,
binder: $(window), // used to cache the selector for the element that will be scrolling
nextSelector: "div.paginate li.active a",
navSelector: "div.paginate",
contentSelector: null, // rename to pageFragment
extraScrollPx: 0,
itemSelector: "div.notizy",
animate: false,
pathParse: undefined,
dataType: ''html'',
appendCallback: true,
bufferPx: 40,
errorCallback: function () { },
infid: 0, //Instance ID
pixelsFromNavToBottom: undefined,
path: undefined, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
prefill: false, // When the document is smaller than the window, load data until the document is larger or links are exhausted
maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
});

Basado en el ejemplo de la página github (y reemplazando lo que debería reemplazarse), pero no hay absolutamente ningún efecto al hacerlo.

Answer 1

Encontré la solución (para ti, gente del futuro):

$(''#boxes'').infinitescroll({
navSelector : ".paginate",
nextSelector : ".paginate a:last",
itemSelector : ".box",
debug : false,
dataType : ''html'',
path: function(index) {
return "?page=" + index;
}
}, function(newElements, data, url){
var $newElems = $( newElements );
$(''#boxes'').masonry( ''appended'', $newElems, true);
});

Esto funciona porque:

• La paginación dada por laravel 4 es como la que vimos antes
• La paginación en laravel da una URL como ....? Page = x

IMPORTANTE

El error que encontrarás es:

Cuando te desplazas hacia abajo más allá de lo que debería ser la última página, probablemente encontrarás que sigues obteniendo la última página una y otra vez, lo que causa un desplazamiento realmente infinito.

para arreglar esto, vaya a paginator.php (en la carpeta laravel) y cámbielo de la siguiente manera:

if (is_numeric($page) and $page > $last = ceil($total / $per_page))
{
return Response::error(''404'');
}

Espero que ayude a alguien algún día!

Answer 2

Gracias Pretty Good Pancake por esta solución, funciona bien. Sin embargo, creo que en Laravel 4, Response Facade ya no tiene un método de error (), algo así como App::abort(''404'', ''...'') o Response::make(''...'', 404) funcionaría. Solo recuerde agregar el use Illuminate/Support/Facades/.. al archivo dado que el archivo está en el espacio de nombres.

Creo que una forma más limpia de hacerlo es ampliar la clase Paginator usted mismo e implementar la función getCurrentPage. De esta forma, los cambios no desaparecerán cuando realice una php composer.phar update que puede sobrescribir los archivos en el directorio del proveedor.

Answer 3

También hay una manera de implementar esto con otro plugin de desplazamiento infinito https://github.com/pklauzinski/jscroll .

Suponiendo que tiene una vista Blade simple:

<div class="scroll">
<ol>
@foreach($media as $m)
<li>{{$m->title}}</li>
@endforeach
</ol>
{{$media->links()}}
</div>

Podemos lograr desplazamiento infinito con el siguiente código JS

<?=HTML::script(''<YOUR PATH HERE>jquery.jscroll/jquery.jscroll.min.js'');?>
<script type="text/javascript">
$(function() {
$(''.scroll'').jscroll({
autoTrigger: true,
nextSelector: ''.pagination li.active + li a'',
contentSelector: ''div.scroll'',
callback: function() {
$(''ul.pagination:visible:first'').hide();
}
});
});
</script>

La propiedad nextSelector seleccionará el siguiente enlace de página en su paginación Laravel predeterminada, contentSelector selecciona solo el contenido requerido, y la función de devolución de llamada oculta el contenido de paginación (tuve que ocultarlo manualmente porque su atributo pagingSelector parece no ser válido para mí). Puede encontrar detalles del modo en la página de inicio del complemento.