Laravel и бесконечная прокрутка

У меня есть вопрос о разбивке на страницы и бесконечной прокрутке 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>

As we can see, I have a div #boxes which contain divs .box . The pagination is set by Laravel and looks like this :

<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 (и замены того, что должно быть заменено), но это абсолютно не влияет.


jquery laravel laravel-4
person Pretty Good Pancake    schedule 10.05.2013    source источник
comment
в ссылке есть кое-что полезное: wern-ancheta.com/blog/2015/03/01/   -  person Setmax    schedule 18.02.2016

Ответы (3)


arrow_upward
23
arrow_downward

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

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

<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 выберет ссылку на следующую страницу в пейджинге Laravel по умолчанию, contentSelector выбирает только необходимый контент, а функция обратный вызов скрывает содержимое пейджинга ( Мне пришлось вручную скрыть его, потому что их атрибут pagingSelector кажется мне недействительным). Вы можете найти информацию о режиме на домашней странице плагина.

person zloynemec    schedule 26.02.2014
comment
Это потрясающе и легко, спасибо, что поделились, НО оно не поддерживает несколько прокруток на одной странице, так что для будущих парней: D будьте ОСТОРОЖНЫ! - person Mohamed Kawsara; 01.03.2016
comment
Это должен быть принятый ответ, он работает как шарм! - person Carlos Alvarez; 05.01.2017
comment
Этому ответу 4 года, и он все еще спас меня, как часы работы. Большое спасибо! Согласен с Карлосом Альваресом, это должен быть принятый ответ. - person Marc Bellêtre; 13.03.2018

arrow_upward
18
arrow_downward

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

$('#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, такая же, как мы видели раньше
  • Разбивка на страницы в laravel дает URL-адрес типа ....?page=x

ВАЖНО

Ошибка, с которой вы столкнетесь:

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

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

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

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

person Pretty Good Pancake    schedule 10.05.2013
comment
Большое спасибо за ваш ответ, но у меня это не сработало, это сделано, и оно новее для Лары 5 5-paginate]" title="бесконечная прокрутка jquery laravel 5 paginate%5d"> stackoverflow.com/questions/33221805/ - person Mohamed Kawsara; 01.03.2016

arrow_upward
2
arrow_downward

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

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

person jct    schedule 17.09.2013