使用AJAX和PHP在无限滚动中获取表的结果?

时间:2012-12-19 19:56:38

标签: php jquery mysql ajax pdo

我正在尝试使用AJAX和PHP从我的表中获得20个结果(当用户滚动到底部时)。

到目前为止,我已经接下来......

AJAX

// Infinite Scroll
loadData( 0 );
//Hide Loader for Infinite Scroll
$('div.ajaxloader').hide();

});

function loadData ( last_id ) {
    var $entries = $('.directory'),
        $loader = $('.ajaxloader', $entries).show();
    $.get( '/getentries.php', { last_id : last_id }, function( data ) {
        $entries.append( data ).append( $loader.hide() );
        filterEntries();
    });
};


//Isotope filter - no changes to this code so I didn't include it

$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        $('div.ajaxloader').show('slow');
        loadData( $( '.directory item:last' ).data('id') )
    }

PHP

try {
  // Connect and create the PDO object
  $conn = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
  $conn->exec("SET CHARACTER SET utf8");      // Sets encoding UTF-8

  // Define and perform the SQL SELECT query
  $sql = "SELECT * FROM `directory` WHERE user_active != ``";
  $result = $conn->query($sql);

  $sth = $conn->prepare("SELECT * FROM directory WHERE user_active != ''");
        $sth->execute(array(':county' => $county));

        $c = 1;
        while ($row = $sth->fetch(PDO::FETCH_ASSOC)) {
            echo '<div class="entry';
                 if (($c % 4) == 1) echo ' alpha ';
           // ECHO RESULT STYLES ETC HERE
        $c++;
        }

  $conn = null;        // Disconnect
}
catch(PDOException $e) {
  echo $e->getMessage();
}

现在我的AJAX和查询似乎工作得很好,但问题是它只是再次拉动记录,而不是接下来的20?

我以前从未这样做过如此抱歉,如果我听起来很天真,但任何帮助都会非常感激!

3 个答案:

答案 0 :(得分:1)

您需要在mysql查询中添加限制。请参阅以下代码

// Infinite Scroll
loadData( 0 );
//Hide Loader for Infinite Scroll
$('div.ajaxloader').hide();

});

function loadData ( last_id ) {
    var $entries = $('.directory'),
        $loader = $('.ajaxloader', $entries).show();
    $.get( '/getentries.php?startp=0&endp=20', { last_id : last_id }, function( data ) {
        $entries.append( data ).append( $loader.hide() );
        filterEntries();
    });
};


//Isotope filter - no changes to this code so I didn't include it

$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        $('div.ajaxloader').show('slow');
        loadData( $( '.directory item:last' ).data('id') )
    }


PHP


try {
  // Connect and create the PDO object
  $conn = new PDO("mysql:host=$hostdb; dbname=$namedb", $userdb, $passdb);
  $conn->exec("SET CHARACTER SET utf8");      // Sets encoding UTF-8

  // Define and perform the SQL SELECT query
  $sql = "SELECT * FROM `directory` WHERE user_active != ``";
  $result = $conn->query($sql);

  $sth = $conn->prepare("SELECT * FROM directory WHERE user_active != '' limit $_REQUEST['startp'],$_REQUEST['endp']");
        $sth->execute(array(':county' => $county));

        $c = 1;
        while ($row = $sth->fetch(PDO::FETCH_ASSOC)) {
            echo '<div class="entry';
                 if (($c % 4) == 1) echo ' alpha ';
           // ECHO RESULT STYLES ETC HERE
        $c++;
        }

  $conn = null;        // Disconnect
}
catch(PDOException $e) {
  echo $e->getMessage();
}

由于 Ripa Saha

答案 1 :(得分:0)

SELECT * FROM foo WHERE id > $lastIndex ORDER BY id LIMIT 20;

编辑:哎呀。这是常规的mysql,而不是使用准备好的语句。根据{{​​3}},您的回答应如下所示:

$sql = "SELECT * FROM directory WHERE id > :lastIndex AND user_active != '' LIMIT 20";
$sth = $conn->prepare($sql);
$sth->execute(array(':lastIndex' => $lastIndex));

这样做是在$lastIndex之后抓取接下来的20个结果。您需要做的就是将lastIndex(与页面上的结果数量一致)的值发送给您的请求并相应地使用它。

或者,您可以执行相反的操作并将$lastIndex与您的结果一起发送到客户端,以便在用户发出新请求时存储和使用javascript。

答案 2 :(得分:0)

嗯,简短的回答是为您的查询添加偏移量。这就像分页一样。您只需跟踪您所在的页面并按特定值偏移查询。在这种情况下,您只需在最后加载页面,而不是更改页面。 Here is an example您可以谷歌并阅读更多内容