无限的ajax滚动分页循环

Question

我正在使用无限的ajax滚动。 它正在工作，因为我可以点击加载更多项目，这将加载内容。 然而，我应该停在最后一页，并显示“没有更多的帖子”，而是仍然显示“加载更多项目”链接，点击时再次从第2页开始分页。

安慰：

Welcome at page 2, the original url of this page would be: /website/home/2
Welcome at page 3, the original url of this page would be: /website/home/3

我应该显示“没有更多的帖子” - 而是继续如下：

Welcome at page 4, the original url of this page would be: /website/home/2
Welcome at page 5, the original url of this page would be: /website/home/3

IAS：

<script type="text/javascript">
var ias = $.ias({
  container: "#posts",
  item: ".post",
  pagination: "#pagination",
  next: ".next a"
});

ias.extension(new IASSpinnerExtension());
ias.extension(new IASTriggerExtension({offset: 1}));
ias.extension(new IASNoneLeftExtension({text: 'There are no more posts.'}));
jQuery.ias().extension(new IASPagingExtension());
jQuery.ias().on('pageChange', function(pageNum, scrollOffset, url) {

console.log(
    "Welcome at page " + pageNum + ", " +
    "the original url of this page would be: " + url    
);

});     
</script>

我试图实现以下，它不起作用：

if(url == '/website/home/2' && pageNum > 2) {
jQuery.ias().destroy();
}

我正在使用来自http://www.phpeasystep.com/phptu/29.html的分页

分页：

$targetpage = "home.php";   
$limit = 10;                            
$page = $_GET['page'];
if($page) 
    $start = ($page - 1) * $limit;      
else
    $start = 0; 



$query2 = $pdo->prepare("select count(*) from table where...");
$query2->execute(array(':id' => $id));
$total_pages = $query2->fetchColumn();  



if ($page == 0) $page = 1;                  
$prev = $page - 1;                          
$next = $page + 1;                          
$lastpage = ceil($total_pages/$limit);      
$lpm1 = $lastpage - 1;                      


$pagination = "";
if($lastpage > 1)
{   
    $pagination .= "<ul class=\"pagination\">";

    if ($page > 1) 
        $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$prev\">&laquo;</a></li>";
    else
        $pagination.= "<li class=\"disabled\"><a href=\"#\">&laquo;</a></li>";  


    if ($lastpage < 7 + ($adjacents * 2))   
    {   
        for ($counter = 1; $counter <= $lastpage; $counter++)
        {
            if ($counter == $page)
                $pagination.= "<li class=\"active\"><a href=\"#\">$counter<span class=\"sr-only\">(current)</span></a></li>";
            else
                $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$counter\">$counter</a></li>";                    
        }
    }
    elseif($lastpage > 5 + ($adjacents * 2))    
    {

        if($page < 1 + ($adjacents * 2))        
        {
            for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
            {
                if ($counter == $page)
                    $pagination.= "<li class=\"active\"><a href=\"#\">$counter<span class=\"sr-only\">(current)</span></a></li>";
                else
                    $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$counter\">$counter</a></li>";                    
            }
            $pagination.= "";
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$lpm1\">$lpm1</a></li>";
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$lastpage\">$lastpage</a></li>";      
        }

        elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
        {
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=1\">1</a></li>";
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=2\">2</a></li>";
            $pagination.= "";
            for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
            {
                if ($counter == $page)
                    $pagination.= "<li class=\"active\"><a href=\"#\">$counter<span class=\"sr-only\">(current)</span></a></li>";
                else
                    $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$counter\">$counter</a></li>";                    
            }
            $pagination.= "";
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$lpm1\">$lpm1</a></li>";
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$lastpage\">$lastpage</a></li>";      
        }

        else
        {
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=1\">1</a></li>";
            $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=2\">2</a></li>";
            $pagination.= "";
            for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
            {
                if ($counter == $page)
                    $pagination.= "<li class=\"active\"><a href=\"#\">$counter<span class=\"sr-only\">(current)</span></a></li>";
                else
                    $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$counter\">$counter</a></li>";                    
            }
        }
    }


    if ($page < $counter - 1) 
        $pagination.= " <li class=\"next\"><a href=\"$targetpage?page=$next\">&raquo;</a></li>";
    else
        $pagination.= "<li class=\"disabled\"><a href=\"#\">&raquo;</a></li>";
    $pagination.= "</ul>\n";        
}

Answer 1

请尝试为无限ajax滚动添加一个以下的事件处理程序，如下所示：

jQuery.ias.on('noneLeft', function() {
    console.log('We hit the bottom!');
});

并查看是否在浏览器控制台中打印了这个。 如果没有打印，那么您的分页链接就会出现问题。 交叉验证。 使用firebug检查您的HTML并检查是否生成了有效链接。

如果你的分页是正确的，如果你看到上面的noneLeft事件，那么尝试使用以下代码来停止滚动：

pageNum = 0;
jQuery.ias.on('next', function(url) {
    if (url.indexOf("/website/home/2") > -1 && pageNum > 2) {
        return false;
    }
    else{
        pageNum++; 
    }
})

Answer 2

我有一个纯jquery的自定义解决方案，这里是如何工作的，

/** Javascript Block **/
//make a request(load_next_set_records) to records that go for content loading by scroll or click of button
$(".load_more_button").on('click',load_next_set_records);
function scrollDetectLimit(){//trigger load_next_set_records(); when scroll reaches a target}

load_next_set_records = function(){
   $.ajax({
      url : '/url_that_returns_json_records',
      data:{
           //required to return next paginated records assumed that records are wrapped within div.record_block that resembles loaded records
           next_records_load_pointer:$(".record_block").length
      },
      dataType : 'json',
      beforeSend:function(){},
      success:function(response){
        if(//response has many records)
          //actions when records exists, append new set of records wrapped with div.record_block
        else
         //simply disable loadmore button see below in error call back

      },
      error:function(xhr){
       //simply disable loadmore button
       $(".load_more_button").before('No more to load');
        $(".load_more_button").fadeOut();
      }
   });
  }

我希望你得到代码逻辑，这需要根据你的要求进一步更新代码，让我知道是否有困难进入它。