Я использую бесконечный свиток ajax. Он работает, так как я могу нажимать на загрузку большего количества элементов, и это загружает содержимое. Однако ias должен остановиться на последней странице и показать «Больше нет сообщений», вместо этого он по-прежнему показывает ссылку «загрузить больше предметов», которая при нажатии начинает снова разбивать страницы на стр. 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
ias должен отображать «Больше нет сообщений» – вместо этого он продолжается, как показано ниже:
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
МСФО:
<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\">«</a></li>"; else $pagination.= "<li class=\"disabled\"><a href=\"#\">«</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\">»</a></li>"; else $pagination.= "<li class=\"disabled\"><a href=\"#\">»</a></li>"; $pagination.= "</ul>\n"; }
Попробуйте добавить еще один обработчик событий для бесконечного прокрутки ajax следующим образом:
jQuery.ias.on('noneLeft', function() { console.log('We hit the bottom!'); });
И посмотрите, печатается ли это или нет в консоли браузера. Если это не печатается, у вас возникли проблемы с вашими ссылками на страницы. Крест проверить это. Осмотрите свой HTML-код с помощью firebug и проверьте, не генерируются ли нужные ссылки.
Если правильная разбивка на страницы и если вы видите событие 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(); } }); }
Надеюсь, вы получите логику кода, это потребует дополнительного обновления кода в соответствии с вашим требованием, сообщите мне, если есть трудности с этим.