2015-09-04 2 views
6

Я использую бесконечный свиток ajax. Он работает, так как я могу нажимать на загрузку большего количества элементов, и это загружает содержимое. Однако МСФО следует остановиться на последней странице и показать "Там больше нет сообщений, а она по-прежнему показывает ссылку«загрузить больше предметов», которые при нажатии запускает нумерацию страниц снова со страницы 2.бесконечный ajax scroll pagination looping

консоль:

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 

: МСФО

<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";   
} 
+0

Я чувствую, что ошибка server_side. var_dump значение $ total_pages среди других переменных в скрипте php, чтобы проверить. Хотя простая клиентская сторона «взломать» должна была бы сравнить var pageNum с последними цифрами в URL-адресе var. Если они не равны, то destroy(), показать сообщение. –

+0

Это не значение $ total_pages. Я проверил это, я думаю, что его сценарий разбиения на страницы, перейдя через страницы1 и страницы2, знаете ли вы о каких-либо скриптах разбиения на страницы, которые хорошо работают с бесконечным прокруткой ajax? – user3312792

ответ

4

Пожалуйста, попробуйте добавить еще один обработчик событий для бесконечного 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++; 
    } 
}) 
+0

Я попытался добавить неэлементный скрипт, он не показывался в консоли, поэтому я думаю, что это правильно, это может быть разбиение на страницы. Знаете ли вы о каких-либо сценариях страниц, которые хорошо работают с ias? Я добавил код страницы на вопрос, возможно, вы можете обнаружить ошибку – user3312792

+0

ли вы скопировали сценарий разбивки на страницы с http://www.a2zwebhelp.com/php-mysql-pagination? – vijayP

+0

мин от http://www.phpeasystep.com/phptu/29.html, но он выглядит так же, как тот, что указан в вашей ссылке – user3312792

1

У меня есть собственное решение с чистым 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(); 
     } 
    }); 
    } 

Надеюсь, вы получите логику кода, это потребует дополнительного обновления кода в соответствии с вашим требованием, сообщите мне, если есть трудности с этим.

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