2015-10-19 4 views
6

Я успешно возвращая данные из контроллераInfinite Scroll JQuery & Laravel 5 постраничной

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

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

Кроме того, я успешно показывать все, на мой взгляд:

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

Все не прекрасно работает до сих пор.

Однако я не получил официальную документацию вообще. Что такое 'div.navigation' и '#content div.post'? Что они должны быть в моем случае?

Отрывок Из документации:

$('#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: Мой 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" 
    }); 
}); 
}); 

код [< [1] 2] 3]>] часть создается в нижней части страницы, но бесконечный прокрутка не работает. Кроме того, в консоли нет журналов или ошибок.

+0

Хорошо, это описано в комментариях, что такое селектор. 'div.navigation' - это ваша навигация (которого у вас нет, но вы можете вывести ее как' $ posts-> render() '). и 'itemSelector' - это селектор для одного элемента (в вашем случае:' div.col-md-4'. Подумайте о добавлении к нему другого класса, такого как 'post'. – Tim

+0

Я отредактировал мой вопрос и добавил классы, как вы сказали, однако, я все еще не мог соединить их в своем мозгу. Не могли бы вы показать мне? – senty

+0

Смотрите мой плагин с бесконечным прокруткой для разбивки на страницы L5 здесь http://stackoverflow.com/questions/31853472/laravel-infinite-scroll-for-pagination-output –

ответ

5

Сначала нужно добавить сам пагинацию, как это после закрытия #content DIV:

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

Это будет что-то вроде:

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

Чтобы перезаписать постраничной выступающему посмотреть на this answer on SO ,

Тогда ваша конфигурация выглядит следующим образом:

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

В принципе, бесконечное скроллер будем называть ссылки разбивки на страницы для вас, и, таким образом, необходимо знать, где все находится поставить все это вместе.

+0

Большое спасибо за ваш ответ. У меня есть последний вопрос. Где я должен класть 'class =" pagination "?? Какой я должен изменить? Это явно должно быть «ul»? – senty

+0

Вы положили '{!! $ posts-> render() !!} 'в конце вашего' # content' div. Вам не нужно класть 'class =" pagination "в любом месте, так как это выводится функцией Laravel. И да, это должно быть 'ul', потому что это формат, используемый функцией' render'. – Tim

+0

Я очень смутился. Я понимаю, что я только поставлю '{!! $ posts-> render() !!} 'для вывода'

    ... 'bit. Итак, внутри 'class =" item "', правильно? И затем под этим я добавлю '
' – senty

Смежные вопросы