jQuery 无限页面滚动

Question

我正在尝试在页面滚动时完成 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++;
    })

})

Answer 1

我认为您只需检查一下您是否已达到最大页数？

  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>' : '';