Laravel и Infinite Scroll

Question

У меня есть вопрос о Laravel пагинацией и бесконечной прокрутки:

Прежде всего, у меня есть это:

<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> 

Как мы можем видеть, у меня есть DIV #boxes, которые содержат divs .box. пагинацию устанавливаются Laravel и выглядят следующим образом:

<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> 

Так что теперь, я хочу поставить бесконечный свиток вместо пагинации. Как мне использовать https://github.com/paulirish/infinite-scroll?

Я остаюсь здесь, если у вас есть вопросы!

PS: Я попробовал несколько вещей, но никто не работал, как:

$('#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) 
}); 

На примере страницы GitHub (и заменить то, что должно быть заменить), но нет абсолютно никакого эффекта это делать.

Answer 1

Я нашел решение (для вас, люди будущего):

$('#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); 

}); 

Это работает, потому что:

• пагинацию дается Laravel 4, как мы видели ранее
• Подкачка в ларавеле дает URL-адрес, например ....? Page = x

ВАЖНО

Исправлена ​​ошибка, вы столкнетесь является:

При прокрутке вниз за то, что должно быть на последней странице, вы обнаружите, что вы продолжаете получать последнюю страницу снова и снова и снова, в результате чего по-настоящему бесконечная прокрутка.

, чтобы исправить это, перейдите к paginator.php (в папке Laravel) и изменить его следующим образ:

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

Надеется, что это поможет кому-нибудь!

Answer 2

Благодарим Pretty Good Blanc за это решение, оно работает хорошо. Тем не менее, я думаю, что в Laravel 4 у Response Facade больше нет метода error(), поэтому что-то вроде App::abort('404', '...') или Response::make('...', 404) будет работать. Не забудьте добавить файл use Illuminate\Support\Facades\.. в файл, так как файл находится в пространстве имен.

Я думаю, что более чистый способ сделать это - это, вероятно, расширить класс Paginator и реализовать функцию getCurrentPage. Таким образом, изменения не будут уничтожены, если вы выполните php composer.phar update, которые могут перезаписывать файлы в каталоге поставщика.

Answer 3

Существует также способ реализовать это с помощью другого бесконечного плагина прокрутки https://github.com/pklauzinski/jscroll.

Предполагая, что у вас есть простой вид лезвия:

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

{{$media->links()}} 
</div> 

Мы можем достичь бесконечного свитка со следующим 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> 

nextSelector свойства будет выбрать следующую ссылку страницы в вашем default Laravel paging, contentSelector выбирает только необходимый контент, а обратный вызов функция скрывает пейджинговый коннектор (мне пришлось вручную скрыть его, потому что их атрибут pagingSelector для меня недействителен). Сведения о режиме можно найти на домашней странице плагина.