使用AJAX和PHP在無限滾動中獲取表的結果？

Question

我正在嘗試使用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？

我以前從未這樣做過如此抱歉，如果我聽起來很天真，但任何幫助將不勝感激！

Answer 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

Answer 2

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

編輯：哎呀。 這是常規的mysql，而不是使用准備好的語句。 基於php文檔 ，這是你的答案應該是這樣的：

$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。

Answer 3

嗯，簡短的回答是為您的查詢添加偏移量。 這就像分頁一樣。 您只需跟蹤您所在的頁面並按特定值偏移查詢。 在這種情況下，您只需在最后加載頁面，而不是更改頁面。 這是一個示例您可以谷歌並閱讀更多