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

jQuery Infinite Page Scroll

1 个答案: