Meer items laden uit database ~ Infinite Scroll

Dit is een vrij complexe vraag. Voordat u uw eigen variatie vanaf het begin probeert te coderen, raad ik u aan de Infinite Scroll jQuery-plug-in te bekijken. een> . Als dat het probleem niet oplost, is hier een mogelijke oplossing:

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

De Javascript-code stuurt een AJAX GET-verzoek naar het php-script met de id van het laatste item dat in de lijst wordt weergegeven. Het PHP-script retourneert vervolgens 30 vermeldingen die na die id komen. Het originele Javascript-bestand bevatte een beetje PHP-code. Ik heb dat verwijderd, omdat ik niet weet wat het doel is (voer je de JS misschien uit vanuit een PHP-script?). Ook de hele XMLHttpRequest code kan worden ingekort tot de $.get() functie. Je gebruikt sowieso jQuery, dus je hoeft het wiel niet opnieuw uit te vinden. Ik heb de data-id . gebruikt attribuut om de invoer-ID's te verzenden. Dat is een HTML5-specifiek kenmerk. Als je het niet wilt gebruiken, gebruik dan gewoon id in plaats daarvan, maar onthoud dat id's niet met een cijfer kunnen beginnen - u moet het voorafgaan met een letter.

In het PHP-script gebruikte ik mysqli in plaats van de mysql_* functies. Gebruik mysqli of PDO vanaf nu, omdat ze betrouwbaarder en veiliger zijn dan de (nu verouderde) mysql_* . Uw PHP-installatie bevat deze extensies waarschijnlijk al. Merk op dat ik geen databasequery-fouten heb behandeld. Die code kun je zelf schrijven. Als je andere soorten fouten krijgt, post ze dan hier en ik zal proberen ze op te lossen.