Това е доста сложен въпрос. Преди да опитате да кодирате своя собствена вариация от нулата, предлагам ви да разгледате приставката Infinite Scroll jQuery . Ако това не го оправи, ето едно възможно решение:
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();
Javascript кодът изпраща AJAX GET заявка към php скрипта с идентификатора на последния запис, показан в списъка. След това PHP скриптът връща 30 записа, които идват след този идентификатор. В оригиналния Javascript файл имаше малко PHP код. Премахнах това, тъй като не знам каква е целта му (извеждате ли JS от PHP скрипт може би?). Също така целият XMLHttpRequest
кодът може да бъде съкратен до $.get()
функция. Вие така или иначе използвате jQuery, така че не е нужно да изобретявате колелото. Използвах data-id
атрибут за предаване на идентификаторите на записа. Това е специфичен атрибут за HTML5. Ако не искате да го използвате, просто използвайте id
вместо това, но не забравяйте, че идентификаторите не могат да започват с число - трябва да го поставите с буква.
В PHP скрипта използвах mysqli
вместо mysql_*
функции. Трябва да използвате mysqli
или PDO
от сега нататък, тъй като те са по-надеждни и сигурни от (вече отхвърлен) mysql_*
. Вашата PHP инсталация най-вероятно вече включва тези разширения. Обърнете внимание, че не се справих с грешки при заявките за база данни. Можете сами да напишете този код. Ако получите други видове грешки, публикувайте ги тук и аз ще се опитам да ги поправя.