Đang tải thêm các mục từ cơ sở dữ liệu ~ Infinite Scroll

Đây là một câu hỏi khá phức tạp. Trước khi cố gắng viết mã biến thể của riêng bạn từ đầu, tôi khuyên bạn nên xem qua Plugin jQuery Infinite Scroll . Nếu điều đó không khắc phục được, đây là một giải pháp khả thi:

Javascript

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

});

function loadData ( last_id ) {
    var $entries = $('#entries'),
        $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( $( '#entries item:last' ).data('id') )
    }
});

PHP

<?php
//Connect to Database
$con = new mysqli( 'localhost', 'root', 'root', 'awards' );
if( $con->connect_errno ) {
    die( 'Could not connect:' . $con->connect_error );
}

$last_id = isset( $_GET['last_id'] ) ? (int)$_GET['last_id'] : 0; 
$stmt = $con->prepare( 'SELECT * FROM entry WHERE status = "registered" AND entry_id > (?) ORDER BY entry_id LIMIT 0, 30' );
$stmt->bind_param( 'i', $last_id );
$stmt->execute();

$result = $stmt->get_result();    
while( $row = $result->fetch_assoc() ) {
    //Get award cat ids
    $awardcat = $row['awards_subcategory_id'];

    print "<div class='item item$awardcat clearfix' data-id='" . $row['entry_id'] . "'>";//add award cat id to each div
    print '<img class="image" src="http://localhost:8888/awardsite/wp-content/themes/award/placeholder.jpg" />';
    print "<p > Studio: " . $row['studio'] . "</p>";
    print "<p class='client'> Client: " . $row['client'] . "</p>";
    print "<p class='description'> Description: " . $row['description'] . "</p>";
    print "<p class='solutionprocess'> Solution Process: " . $row['solution_process'] . "</p>";
    print "</div>";

}
$con->close();

Mã Javascript gửi một yêu cầu AJAX GET tới tập lệnh php với id của mục nhập cuối cùng được hiển thị trong danh sách. Sau đó, tập lệnh PHP trả về 30 mục nhập sau id đó. Tệp Javascript ban đầu có một chút mã PHP trong đó. Tôi đã loại bỏ điều đó, vì tôi không biết mục đích của nó là gì (có thể bạn đang xuất JS từ một tập lệnh PHP?). Ngoài ra, toàn bộ XMLHttpRequest mã có thể được rút ngắn thành $.get() hàm số. Dù sao thì bạn cũng đang sử dụng jQuery, vì vậy bạn không cần phải phát minh lại bánh xe. Tôi đã sử dụng data-id thuộc tính để truyền id mục nhập. Đó là một thuộc tính cụ thể của HTML5. Nếu bạn không muốn sử dụng nó, chỉ cần sử dụng id thay vào đó, nhưng hãy nhớ rằng id không thể bắt đầu bằng một số - bạn nên đặt trước nó bằng một chữ cái.

Trong tập lệnh PHP, tôi đã sử dụng mysqli thay vì mysql_* chức năng. Bạn nên sử dụng mysqli hoặc PDO kể từ bây giờ, vì chúng đáng tin cậy và an toàn hơn mysql_* (hiện không được dùng nữa) . Cài đặt PHP của bạn rất có thể đã bao gồm các phần mở rộng này. Lưu ý rằng tôi đã không xử lý các lỗi truy vấn cơ sở dữ liệu. Bạn có thể tự viết mã đó. Nếu bạn gặp các loại lỗi khác, hãy đăng chúng ở đây và tôi sẽ cố gắng sửa chúng.