无限的ajax滚动分页循环
我正在使用无限的ajax滚动。 它正在工作，因为我可以点击加载更多项目，这将加载内容。 但是，我应该停在最后一页并显示“没有更多post”，而是仍显示“加载更多项目”链接，点击该链接再次从第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 我应该显示“没有更多的post” – 而是继续如下：
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：
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 ); });
我试图实现以下，它不起作用：
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 .= ""; if ($page > 1) $pagination.= " - «
"; else $pagination.= "- «
"; if ($lastpage < 7 + ($adjacents * 2)) { for ($counter = 1; $counter <= $lastpage; $counter++) { if ($counter == $page) $pagination.= "- $counter(current)
"; else $pagination.= " - $counter
"; } } elseif($lastpage > 5 + ($adjacents * 2)) { if($page < 1 + ($adjacents * 2)) { for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++) { if ($counter == $page) $pagination.= "- $counter(current)
"; else $pagination.= " - $counter
"; } $pagination.= ""; $pagination.= " - $lpm1
"; $pagination.= " - $lastpage
"; } elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2)) { $pagination.= " - 1
"; $pagination.= " - 2
"; $pagination.= ""; for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++) { if ($counter == $page) $pagination.= "- $counter(current)
"; else $pagination.= " - $counter
"; } $pagination.= ""; $pagination.= " - $lpm1
"; $pagination.= " - $lastpage
"; } else { $pagination.= " - 1
"; $pagination.= " - 2
"; $pagination.= ""; for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++) { if ($counter == $page) $pagination.= "- $counter(current)
"; else $pagination.= " - $counter
"; } } } if ($page < $counter - 1) $pagination.= " - »
"; else $pagination.= "- »
"; $pagination.= "
\n"; }
请尝试为无限ajax滚动添加一个以下的事件处理程序，如下所示：
jQuery.ias.on('noneLeft', function() { console.log('We hit the bottom!'); });
并查看是否在浏览器控制台中打印了这些内容。 如果没有打印，那么您的分页链接就会出现问题。 交叉validation。 使用firebug检查您的HTML并检查是否生成了有效链接。
如果你的分页是正确的，如果你看到上面的noneLeft事件，那么尝试使用以下代码来停止滚动：
pageNum = 0; jQuery.ias.on('next', function(url) { if (url.indexOf("/website/home/2") > -1 && pageNum > 2) { return false; } else{ pageNum++; } })
我有一个纯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(); } }); }
我希望你得到代码逻辑，这需要根据你的要求进一步更新代码，让我知道是否有困难进入它。