Laravel 5 分页 + 无限滚动 jQuery

Posted 2023-03-14

【中文标题】Laravel 5 分页 + 无限滚动 jQuery

【英文标题】：Laravel 5 Paginate + Infinite Scroll jQuery

【发布时间】：2016-01-18 10:33:33

【问题描述】：

我正在尝试使用paginate() 来实现无限滚动。我认为最简单的方法是使用“无限滚动”来实现这一点。如果您有任何其他建议如何在没有无限滚动库的情况下做到这一点，只需使用 jQuery，我很高兴知道..

我正在返回变量以像这样查看：

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>

javascript 部分：

$(document).ready(function() 
  (function() 
     var loading_options = 
        finishedMsg: "<div class='end-msg'>End of content!</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  li:last a",   // is this where it's failing?
         itemSelector: "#content div.item"
     );
   );
); 

但是，这不起作用。 ->render() 部分正在工作，因为我得到了 [] 部分。但是，无限滚动不起作用。我也没有在控制台中收到任何错误。

[] 在视图中是这样的：来源：

<ul class="pagination">
       <li class="disabled"><span>«</span> </li>                    //   «
       <li class="active"><span>1</span></li>                       //   1
       <li><a href="http://test.dev/?page=2">2</a></li>             //   2
       <li><a href="http://test.dev/?page=3">3</a></li>             //   3
       <li><a href="http://test.dev/?page=2" rel="next">»</a></li>  //   »
</ul>

【问题讨论】：

我承认，我不熟悉无限滚动插件，但我已经做了一些我自己构建的无限滚动。我将 pages 变量保存在隐藏的输入框中，当您滚动到底部时，页数会更新，并且会调用根据新页码提取新条目的函数并将新条目附加到容器的底部.我还设置了一个 max_pages 隐藏输入框，因此当用户达到该 max_page 计数时，您会看到一条类似于页尾的消息。我不知道这是否是最好的方法，但它对我来说效果最好。你想看一些经验吗？

我愿意接受任何建议，只要我也可以使用加载文本/图像（因此具有加载状态的功能）。我认为最好自己做而不是使用库，但我想我很想坚持使用 Laravel 的 paginate()。我很想看看你的方法。你能适应我的情况吗？

当然！在下面查看我的答案。 :)

这是一个相关问题：***.com/q/16487576/470749

【参考方案1】：

只要您获取新帖子的调用与页面加载不同，您就应该能够很好地使用分页。所以你会有两个 Laravel 调用：

1.) 提供页面的模板（包括 jQuery、CSS 和你的 max_page count 变量——查看 html） 2.) 让 AJAX 根据您给它的页面调用帖子。

这就是我让无限卷轴工作的方式...

HTML：

<!-- Your code hasn't changed-->
<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>

<!-- Holds your page information!! -->
<input type="hidden" id="page" value="1" />
<input type="hidden" id="max_page" value="<?php echo $max_page ?>" />

<!-- Your End of page message. Hidden by default -->
<div id="end_of_page" class="center">
    <hr/>
    <span>You've reached the end of the feed.</span>
</div>

在页面加载时，您将填写 max_page 变量（因此请执行以下操作：ceil(Post::with('status' == 'verified')->count() / 30);。

接下来，你的 jQuery：

var outerPane = $('#content'),
didScroll = false;

$(window).scroll(function()  //watches scroll of the window
    didScroll = true;
);

//Sets an interval so your window.scroll event doesn't fire constantly. This waits for the user to stop scrolling for not even a second and then fires the pageCountUpdate function (and then the getPost function)
setInterval(function() 
    if (didScroll)
       didScroll = false;
       if(($(document).height()-$(window).height())-$(window).scrollTop() < 10)
        pageCountUpdate(); 
    
   
, 250);

//This function runs when user scrolls. It will call the new posts if the max_page isn't met and will fade in/fade out the end of page message
function pageCountUpdate()
    var page = parseInt($('#page').val());
    var max_page = parseInt($('#max_page').val());

    if(page < max_page)
       $('#page').val(page+1);
       getPosts();
       $('#end_of_page').hide();
     else 
      $('#end_of_page').fadeIn();
    



//Ajax call to get your new posts
function getPosts()
    $.ajax(
        type: "POST",
        url: "/load", // whatever your URL is
        data:  page: page ,
        beforeSend: function() //This is your loading message ADD AN ID
            $('#content').append("<div id='loading' class='center'>Loading news items...</div>");
        ,
        complete: function() //remove the loading message
          $('#loading').remove
        ,
        success: function(html)  // success! YAY!! Add HTML to content container
            $('#content').append(html);
        
     );

 //end of getPosts function

你去吧！就这样。我也在这段代码中使用了Masonry，所以动画效果很好。

【讨论】：

感谢您的回答。这真的很好解释。我将您的代码修改为我的代码，但最终得到了Uncaught SyntaxError: Unexpected token )。我相信这是因为我正在尝试没有 csrf 令牌的 ajax 帖子。我尝试添加var currentPage = 'page': $('#page').val(), "_token": " csrf_token() "; 并将data: page: page 更改为data:currentPage, 以及data: page: currentPage ，但无法正常工作。

你仍然得到 [] 因为这条线：` !! $posts->render() !!` .它根据文档吐出分页链接（在 4.2 中有所不同）。你是在视图中调用这个 jQuery 函数吗？

呸！很高兴你让它工作！我正要问你是否以某种方式设法得到它。如果您对我的任何一个 cmets 投赞成票，那也会加分。 :) 关于 ajax 被调用两次，这意味着 setInterval 函数被放置在间隔被设置两次的区域中。这取决于您如何进行设置。确保 jQuery 不在不断被调用的视图中。这将在您滚动时重置间隔，并且每次都会更新页数。尝试将其放在模板中（在页面加载时）。

我解决了我的问题，添加了一个布尔值 var availableToLoad = true; 并摆脱了 setInterval :) 非常感谢队友

开箱即用的思考方式！ ;） 不客气！很高兴你得到它。

【参考方案2】：

本教程简单实用 - http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll

最终脚本可能如下所示

!! HTML::script('assets/js/jscroll.js') !!
<script>
    $('.link-pagination').hide();
    $(function () 
        $('.infinite-scroll').jscroll(
            autoTrigger: true,
            loadingHtml: '<img class="center-block" src="/imgs/icons/loading.gif"  />', // MAKE SURE THAT YOU PUT THE CORRECT IMG PATH
            padding: 0,
            nextSelector: '.pagination li.active + li a',
            contentSelector: 'div.infinite-scroll',
            callback: function() 
                $('.link-pagination').remove();
            
        );
    );
</script>

你只需要使用laravel的分页

!! $restaurants->links() !!

【讨论】：

效果很好，如果我需要使用像“加载更多”这样的手动触发器来代替