如何进行无限滚动?

时间:2013-05-28 16:12:39

标签: php jquery infinite-scroll

如何努力进行PHP调用以在滚动时加载项目。我有一个while循环的项目,需要一个PHP代码infinity.php加载更多的项目到ID“流”但无法找出解决方案。对于一些专业知识的帮助会非常有用!

主页上的

PHP:

<?php
$getStream = mysql_query("SELECT * FROM ".$DBprefix."xxx WHERE xxx='xxx' AND status='1' ORDER by id");

$counter = 0;
$max = 2;

while($stream = mysql_fetch_array($getStream) and ($counter < $max)) {
$counter++;

  }
?>

我有这个Jquery:

    function lastAddedLiveFunc()
{
    $('div#loader').fadeIn();

    $.get("infinity.php", function(data){
        if (data != "") {
            //console.log('add data..');
            $("#stream").append(data);
        }
        $('div#loader').empty();
    });
};

HTML:

<div id='stream'></div>

1 个答案:

答案 0 :(得分:1)

我想你在这里错过了一些关键部分。首先,当我们使用infinte scroll并且我们从数据库中获取数据时,您需要一个LIMIT子句,LIMIT子句允许offset, total关系。其中offset表示要开始的行,total表示我们要采用的行数。

最初,你会有类似的东西

$offset = $_GET['offset'] ? $_GET['offset'] : 0; //start at 0th row if no variable set
$total = $_GET['total'] ? $_GET['total'] : 20; // get 20 rows if no variable set

在上面,我们使用三元变量赋值来检查参数是否传递给我们,如果没有,那么我们使用默认值。我们将使用mysqli和prepared,bind_param,execute,bind_result和fetch_assoc()方法。

if( $getStream = $mysqli->prepare("SELECT * FROM ? WHERE xxx=? AND status=? ORDER by id LIMIT ?,?"):

    $ret = ''; // a variable place holder

    // in the above statement, fill in the ?'s
    // the actual ? will be the value we wish to return, in order from first to last.
    $getStream->bind_param('ssddd', $DBprefix.'xxx', 'xxx', 1, $offset, $total);

    //execute our query
    $getStream->execute();

    $getStream->bind_result($field1, $field2, $field3, $field4); // each field needs it's own variable name, that way we can access them later.

    while($row = $getStream->fetch_assoc()):
        $ret .= '<div class="my-infinite-element"><h3>'. $field1 .'</h3><p>'. $field2.'</p>'. $field3 .', '. $field4 .'</div>';
    endwhile;

    echo $ret;

else:
    return FALSE;
endif;

现在我们将如何处理使用MySQLI获取数据的方法;现在让我们使用ajax语句来获取数据。

$.ajax({
    type: 'GET',
    url : 'infinity.php',
    data: {
        'offset' : $('.my-infinite-elements').length,
        'total' : 20
    },
    success: function(data){
        if(false !== data){
            $('#stream').append(data);
        }
    } 
});

在上文中,我们唯一应该担心的是$('.my-infinite-elements').length。我们为返回的每个元素使用了一类my-infinite-elements。这样,我们可以计算页面上元素的现有长度,这将提供我们的offset值(或者我们想要从哪里开始获取行)。如果我们从数据库中取出20个结果,它基于0,那么我们将得到0-19。当我们执行.length时,我们将得到一个1 based结果,它将返回20,而不是19.这没关系,因为我们不希望最后一行返回还有,所以我们的逻辑很好。我们的ajax函数中的两个变量offset/total对应于我们的三元变量赋值。