2012-08-03 32 views
1

我使用無限滾動的動態數據,但似乎無法讓過去的第2頁...jQuery的無窮滾動不是無限的過去的第2頁

當頁面最初加載我有一個在URL偏移所以我們從0開始,所以,

test2.html?offset=0 

這是加載日期

$offset = $_GET['offset']; 

$data = mysql_query("select * from list limit 30 offset $offset;",$db);   

echo '<div id="wall" class="transitions-enabled infinite-scroll clearfix">'; 

while ($databack33 = mysql_fetch_array($data)){ 

echo '<div class="block">'; 

echo '<a href=#><img src="'.$databack33[item_pic_url].'"></a>'; 

echo '</div>'; 

} 

然後加載下一頁我使用的代碼:

<nav id="page-nav"> 

<? $offset = $offset+30; ?> 

<a href="test2.html?offset=<?=$offset?>"></a> 

</nav> 

這適用於第一頁和第二頁,但它告訴我沒有更多的頁面加載,雖然有更多的數據。

如果我看頁面的源代碼是正確的test2.html?offset=60

這是磚石/無限滾動設立

<script type="text/javascript"> 
$(function(){ 

var $container = $('#wall'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector: '.block', 
    isAnimated: true, 
    animationOptions: { 
     duration: 750, 
     easing: 'linear', 
     queue: false 
     } 
    }); 
}); 

$container.infinitescroll({ 
    navSelector : '#page-nav', // selector for the paged navigation 
    nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
    itemSelector : '.block',  // selector for all items you'll retrieve 
    loading: { 
     finishedMsg: 'No more pages to load.', 
     img: 'http://i.imgur.com/6RMhx.gif' 
    } 
    }, 
    // trigger Masonry as a callback 
    function(newElements) { 
    // hide new items while they are loading 
    var $newElems = $(newElements).css({ opacity: 0 }); 
    // ensure that images load before adding to masonry layout 
    $newElems.imagesLoaded(function(){ 
     // show elems now they're ready 
     $newElems.animate({ opacity: 1 }); 
     $container.masonry('appended', $newElems, true); 
    }); 
    } 
); 

    }); 
</script> 

回答

1

要獲得infinitescroll與合作「偏移量=」分頁我做了以下內容:

存儲當前的'下一頁'網址,並獲取偏移值。

var nextSelector = '#page-nav a'; 
var origNextUrl = $(nextSelector).attr('href'); 
var offsetRegex = /(offset=)([0-9]+)/; 
var offset = origNextUrl.match(offsetRegex)[2]; 

然後在infinitescroll分配的功能,它接受一個頁號,並返回用於加載下一個頁面的URL的「路徑」選項。

$container.infinitescroll({ 
    // other options 
    path: function(pageNum) { 
     return origNextUrl.replace(offsetRegex, ("$1" + (offset * pageNum))); 
    }, 
    //callback 
});