C'est une question assez complexe. Avant d'essayer de coder votre propre variation à partir de zéro, je vous suggère de jeter un œil au Infinite Scroll jQuery Plugin . Si cela ne résout pas le problème, voici une solution possible :
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();
Le code Javascript envoie une requête AJAX GET au script php avec l'id de la dernière entrée affichée dans la liste. Le script PHP renvoie alors 30 entrées qui viennent après cet identifiant. Le fichier Javascript original contenait un peu de code PHP. J'ai supprimé cela, car je ne sais pas quel est son objectif (vous produisez peut-être le JS à partir d'un script PHP ?). Aussi, l'ensemble de XMLHttpRequest le code peut être raccourci en $.get() fonction. Vous utilisez jQuery de toute façon, vous n'avez donc pas besoin de réinventer la roue. J'ai utilisé le data-id attribut pour transmettre les identifiants d'entrée. C'est un attribut spécifique à HTML5. Si vous ne voulez pas l'utiliser, utilisez simplement id à la place, mais rappelez-vous que les identifiants ne peuvent pas commencer par un chiffre - vous devez le préfixer avec une lettre.
Dans le script PHP, j'ai utilisé mysqli au lieu de mysql_* les fonctions. Vous devez utiliser mysqli ou PDO à partir de maintenant, car ils sont plus fiables et sécurisés que le (désormais obsolète) mysql_* . Votre installation PHP inclut probablement déjà ces extensions. Notez que je n'ai pas géré les erreurs d'interrogation de la base de données. Vous pouvez écrire ce code vous-même. Si vous rencontrez d'autres types d'erreurs, postez-les ici et j'essaierai de les corriger.
