Блог

Я пытаюсь выполнить загрузку содержимого ajax при прокрутке страницы и застреваю в некоторых частях.

Вот мой PHP-код:

 //Fetch Total Record
$objDB = new DB;
$fetchCount = $objDB
   ->setStoredProc( 'petContestFetchImagesCount' )
   ->execStoredProc()
   ->parseXML();
 $fetchCount = $fetchCount->data;

 //Total number of results
 $totalResults = $fetchCount->totalRecords; 

 //Records per page
 $limit = 5; 

 //Total number of pages / calls we will make based on the results
 $pages = ceil($totalResults/$limit);

//What page are we currently on?
$page = min($pages, filter_input(INPUT_GET, 'page', FILTER_VALIDATE_INT, array(
    'options' => array(
        'default'   => 1,
        'min_range' => 1,
    ),
)));

$offset = ($page - 1)  * $limit;

// Some information to display to the user
$start = $offset   1;
$end = min(($offset   $limit), $total); 

$nextlink = ($page < $pages) ? '<nav id="page_nav"><a href="?page=' . ($page   1) . '"></a></nav>' : '';

//Fetch Entries
$objDB = new DB;
$submissions = $objDB
   ->setStoredProc( 'petContestFetchImages' )
   ->setParam("offset", $offset )
   ->setParam("rows", $limit )
   ->execStoredProc()
   ->parseXML(); 
 

С этого момента он знает количество сообщений, которые ему нужны, создает разбивку на страницы и т. Д.

Теперь я использую плагин infinateScroll и настраиваю его следующим образом:

     var $container = $('[name=posts]')

    $($container).isotope({
    itemSelector: '.item',
    layoutMode: 'masonry',
    masonry: {
        columnWidth: 10

    }
})

    $container.infinitescroll({
    navSelector: '#page_nav',
    nextSelector: '#page_nav a',
    itemSelector: '.item',
    pixelsFromNavToBottom: -Math.round($(window).height() * 0.9),
    bufferPx: Math.round($(window).height() * 0.9),
    loading: {
        msgText: $container.attr("data-loading-message"),
        finishedMsg: $container.attr("data-no-more-translators")
        }
}, function(newElements) {
    $container.isotope('appended', $(newElements))
    })

})
 

Когда я прокручиваю страницу вниз, содержимое загружается нормально. Однако он переходит к последней записи и каждый раз продолжает загружать только последнюю запись. Если я прокручиваю вверх, а затем снова вниз, он загружает только последнюю запись.

Я протестировал свою хранимую процедуру, и она даже не выдает результатов, когда я говорю начать с записи 11 (последний результат) и даю мне еще 5, она не возвращает никаких данных.

Не уверен, чего мне здесь не хватает, но он не должен загружать больше записей после нажатия на последнюю.

Я использовал это для справки: http://blog .lingohub.com/developers/2013/09/endless-pages-scrolling-masonry /

Редактировать:

Это изменение на стороне клиента работает, однако оно не предотвращает запуск вызова ajax, просто добавляя любые результаты, которые он выполняет нормально.

 var tmp = 1;
var pages = '<?php echo $pages; ?>

$container.infinitescroll({
    navSelector: '#page_nav',
    nextSelector: '#page_nav a',
    itemSelector: '.item',
    pixelsFromNavToBottom: -Math.round($(window).height() * 0.9),
    bufferPx: Math.round($(window).height() * 0.9),
    loading: {
        msgText: $container.attr("data-loading-message"),
        finishedMsg: $container.attr("data-no-more-translators")
        }
}, function(newElements) {
    if(tmp < pages){
        $container.isotope('appended', $(newElements))
    }
    tmp  ;
    })

})
 

Я бы подумал, что вы просто проверили, достигли ли вы максимального количества страниц?

   if($page<$pages){
       //Fetch Entries
       $objDB = new DB;
       $submissions = $objDB
        ->setStoredProc( 'petContestFetchImages' )
        ->setParam("offset", $offset )
        ->setParam("rows", $limit )
        ->execStoredProc()
        ->parseXML(); 
    }
 

Затем измените nextlink, чтобы отобразить одну дополнительную ссылку выше переменной $pages. Вот так…

     $nextlink = ($page <= $pages) ? '<nav id="page_nav"><a href="?page=' . ($page   1) . '"></a></nav>' : '';