2015-10-19 27 views
6

mam powodzeniem powrocie dane z kontroleraNieskończony Scroll jQuery & laravel 5 paginate

public function index() 
{ 
    $posts = Post::with('status' == 'verified) 
         ->paginate(30); 

    return view ('show')->with(compact('posts')); 
} 

Również jestem powodzeniem pokazując wszystko moim zdaniem:

<div id="content" class="col-md-10"> 
    @foreach (array_chunk($posts->all(), 3) as $row) 
     <div class="post row"> 
      @foreach($row as $post) 
       <div class="item col-md-4"> 
        <!-- SHOW POST --> 
       </div> 
      @endforeach 
     </div> 
    @endforeach 
    {!! $posts->render() !!} 
</div> 

wszystko działa dobrze aż do teraz.

Jednak nie otrzymałem oficjalnej dokumentacji. Co to są "div.navigation" i "#content div.post"? Jaką powinny one być w moim przypadku?

Fragment z dokumentacji:

$('#content').infinitescroll({ 

    navSelector : "div.navigation",    
        // selector for the paged navigation (it will be ?>hidden) 
    nextSelector : "div.navigation a:first",  
        // selector for the NEXT link (to page 2) 
    itemSelector : "#content div.post"   
        // selector for all items you'll retrieve 
}); 

EDIT: Moje JavaScript So Far

$(document).ready(function() { 
(function() { 
    var loading_options = { 
     finishedMsg: "<div class='end-msg'>Congratulations! You've reached the end of the internet</div>", 
     msgText: "<div class='center'>Loading news items...</div>", 
     img: "/assets/img/ajax-loader.gif" 
    }; 

    $('#content').infinitescroll({ 
     loading: loading_options, 
     navSelector: "ul.pagination", 
     nextSelector: "ul.navigation a:first", 
     itemSelector: "#content div.item" 
    }); 
}); 
}); 

Sieć [< [1] 2] 3]>] część jest tworzony u dołu strony, ale nieskończone przewijanie nie działa. Ponadto nie mam żadnych dzienników ani błędów w konsoli.

+0

Cóż, w komentarzach opisano, czym są te selektory. 'div.navigation' jest twoją nawigacją (której nie masz, ale możesz ją wypisać jak' $ posts-> render() '). a 'itemSelector' jest selektorem dla jednego elementu (w twoim przypadku:' div.col-md-4'. Pomyśl o dodaniu do niego kolejnej klasy, takiej jak 'post'). – Tim

+0

Edytowałem moje pytanie i dodałem klasy, ale nie mogłem połączyć ich w swoim mózgu. Czy możesz mi pokazać? – senty

+0

Zobacz mój nieskończony przewijania wtyczkę do paginacji L5 tutaj http://stackoverflow.com/questions/31853472/laravel-infinite-scroll-for-pagination-output –

Odpowiedz

5

Najpierw trzeba dodać samą paginacji tak po zamknięciu #content Gr:

{!! $posts->render() !!} 

ten wyświetli coś podobnego:

<ul class="pagination"><li><a>...</a></li> 

nadpisać prezenterowi paginacji spojrzeć this answer on SO .

Następnie konfiguracja wygląda następująco:

$(document).ready(function() { 
    var loading_options = { 
     finishedMsg: "<div class='end-msg'>Congratulations! You've reached the end of the internet</div>", 
     msgText: "<div class='center'>Loading news items...</div>", 
     img: "/assets/img/ajax-loader.gif" 
    }; 

    $('#content').infinitescroll({ 
     loading: loading_options, 
     navSelector: "ul.pagination", 
     nextSelector: "ul.pagination a:first", 
     itemSelector: "#content div.item" 
    }); 
}); 

Zasadniczo nieskończona scroller wezwie linki paginacji dla Ciebie, a więc musi wiedzieć, gdzie wszystko znajduje się umieścić to wszystko razem.

+0

Wielkie dzięki za odpowiedź. Mam jedno ostatnie pytanie. Gdzie powinienem umieścić 'class =" paginację "'? Którą mam zmienić? Czy wyraźnie musi to być "ul"? – senty

+0

Położyłeś '{!! $ posts-> render() !!} 'na końcu twojego div ## content. Nie musisz wstawiać 'class =" paginacji "' gdziekolwiek, ponieważ otrzymujemy wyjście przez funkcję Laravel. I tak, musi to być 'ul', ponieważ jest to format używany przez funkcję' render'. – Tim

+0

Jestem bardzo zdezorientowany. Rozumiem, że umieszczę tylko '{!! $ posts-> render() !!} 'na wyjściu'

    ... bit. Więc wewnątrz 'class =" item "', czy to prawda? I pod tym, dodaję "
' – senty