Memuat lebih banyak item dari database ~ Gulir Tak Terbatas

Ini adalah pertanyaan yang cukup kompleks. Sebelum mencoba membuat kode variasi Anda sendiri dari awal, saya sarankan Anda melihat Plugin jQuery Scroll Tak Terbatas . Jika itu tidak memperbaikinya, inilah solusi yang mungkin:

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();

Kode Javascript mengirimkan permintaan AJAX GET ke skrip php dengan id dari entri terakhir yang ditampilkan dalam daftar. Skrip PHP kemudian mengembalikan 30 entri yang datang setelah id itu. File Javascript asli memiliki sedikit kode PHP di dalamnya. Saya menghapusnya, karena saya tidak tahu apa tujuannya (apakah Anda mengeluarkan JS dari skrip PHP mungkin?). Juga, seluruh XMLHttpRequest kode dapat disingkat menjadi $.get() fungsi. Anda tetap menggunakan jQuery, jadi Anda tidak perlu menemukan kembali kemudi. Saya menggunakan data-id atribut untuk mengirimkan id entri. Itu adalah atribut khusus HTML5. Jika Anda tidak ingin menggunakannya, gunakan saja id sebagai gantinya, tetapi ingat bahwa id tidak boleh dimulai dengan angka - Anda harus mengawalinya dengan huruf.

Dalam skrip PHP, saya menggunakan mysqli alih-alih mysql_* fungsi. Anda harus menggunakan mysqli atau PDO mulai sekarang, karena lebih dapat diandalkan dan aman daripada mysql_* (sekarang sudah tidak digunakan lagi) . Instalasi PHP Anda kemungkinan besar sudah menyertakan ekstensi ini. Perhatikan bahwa saya tidak menangani kesalahan kueri basis data. Anda dapat menulis kode itu sendiri. Jika Anda mendapatkan jenis kesalahan lain, posting di sini dan saya akan mencoba memperbaikinya.