Soy nuevo en ajax / php, así que estoy tratando de descubrir la mejor manera de hacer esto.

Tengo una base de datos SQL llena de 1500 elementos que estoy cargando en mi página. Quiero cargar 30 elementos en la página, luego, cuando el usuario llegue al final de la página web, quiero que cargue otros 30 elementos.

Hasta ahora tengo los 30 elementos que se muestran en mi página web, con un menú desplegable que filtra los elementos. También tengo una función que se activa cuando el usuario llega al final de la página.

¿Puede alguien ayudarme con el script PHP para hacer que esto funcione y cargar más elementos? El código que estoy usando está abajo.

Gracias

HTML

<section id="filters">
    <select name="entries"  onchange="filterEntries()">
        <option value="*">show all</option>
        <option value=".item323">323</option>
        <option value=".item266">266</option>
        <option value=".item277">277</option>
        <option value=".item289">289</option>
    </select>
</section> <!-- #filters -->

<div id="entries" class="clearfix">
    <div class="ajaxloader"><img src="<?php bloginfo('template_url'); ?>/ajax_load.gif" alt="loading..." /></div><!--ajaxloader-->
</div><!--entries-->
<div class="ajaxloader"><img src="<?php bloginfo('template_url'); ?>/ajax_load.gif" alt="loading..." /></div><!--ajaxloader-->

Jquery

$(document).ready(function () {
    loadData();
    //Hide Loader for Infinite Scroll
    $('div.ajaxloader').hide();

});

function loadData () {
//Show Loader for main content
    $('#entries .ajaxloader').show();
//Pull in data from database
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        "use strict";
        xmlhttp=new XMLHttpRequest(); 
    }
    else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState===4 && xmlhttp.status===200) {    
        document.getElementById("entries").innerHTML=xmlhttp.responseText;
        //Fire filter function once data loaded
            filterEntries();
            //Hide Loader for main content once loaded
            $('#entries .ajaxloader').hide();
    }
    }
    xmlhttp.open("POST","<?php bloginfo('template_url'); ?>/getentries.php?$number",true);
    xmlhttp.send();
};


//Isotope filter
function filterEntries () {
    var $container = $('#entries');
       $select = $('#filters select');

    $container.isotope({
        itemSelector : '.item'
    });

    $select.change(function() {
    var filters = $(this).val();

    $container.isotope({
            filter: filters
    });
});
};

$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
    $('div.ajaxloader').show('slow');

        //alert("Function to load more entries");

    }
});

PHP

<?php
    //Connect to Database
    $con = mysql_connect("localhost", "root", "root");
    if (!$con) {
        die('Could not connect: ' . mysql_error());
    }
    mysql_select_db("awards", $con);


    $sql="SELECT * FROM entry WHERE  status = 'registered' ORDER BY `entry_id` LIMIT 0, 30";

    $result = mysql_query($sql);


    while($row = mysql_fetch_array($result)) {
        //Get award cat ids
        $awardcat =  $row['awards_subcategory_id']  ;

        print "<div class='item item$awardcat clearfix'>";//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>";

    }





    mysql_close($con);
?>