Mysql
 sql >> Database >  >> RDS >> Mysql

Caricamento di più elementi dal database ~ Scorrimento infinito

Questa è una domanda piuttosto complessa. Prima di provare a codificare la tua variazione da zero, ti suggerisco di dare un'occhiata al Infinite Scroll jQuery Plugin . Se ciò non risolve il problema, ecco una possibile soluzione:

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

Il codice Javascript invia una richiesta AJAX GET allo script php con l'id dell'ultima voce visualizzata nell'elenco. Lo script PHP restituisce quindi 30 voci che seguono quell'id. Il file Javascript originale conteneva un po' di codice PHP. L'ho rimosso, poiché non so quale sia il suo scopo (forse stai emettendo il JS da uno script PHP?). Inoltre, l'intero XMLHttpRequest il codice può essere abbreviato in $.get() funzione. Stai comunque usando jQuery, quindi non è necessario reinventare la ruota. Ho usato il data-id attributo per trasmettere gli ID di ingresso. Questo è un attributo specifico di HTML5. Se non vuoi usarlo, usa semplicemente id invece, ma ricorda che gli ID non possono iniziare con un numero:dovresti anteporre una lettera.

Nello script PHP, ho usato mysqli invece di mysql_* funzioni. Dovresti usare mysqli o PDO d'ora in poi, poiché sono più affidabili e sicuri del (ora deprecato) mysql_* . La tua installazione di PHP molto probabilmente include già queste estensioni. Si noti che non ho gestito gli errori di query del database. Puoi scrivere tu stesso quel codice. Se ricevi altri tipi di errori, pubblicali qui e cercherò di risolverli.