Mysql
 sql >> база данни >  >> RDS >> Mysql

Зареждане на още елементи от базата данни ~ Infinite Scroll

Това е доста сложен въпрос. Преди да опитате да кодирате своя собствена вариация от нулата, предлагам ви да разгледате приставката 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 инсталация най-вероятно вече включва тези разширения. Обърнете внимание, че не се справих с грешки при заявките за база данни. Можете сами да напишете този код. Ако получите други видове грешки, публикувайте ги тук и аз ще се опитам да ги поправя.




  1. Database
  2.   
  3. Mysql
  4.   
  5. Oracle
  6.   
  7. Sqlserver
  8.   
  9. PostgreSQL
  10.   
  11. Access
  12.   
  13. SQLite
  14.   
  15. MariaDB
  1. Как мога да използвам DATE() в Doctrine 2 DQL?

  2. Не мога да се свържа с MySQL със Sequelize

  3. Kubernetes не копира данни в монтиран том

  4. Колко реда са „твърде много“ за MySQL таблица?

  5. Защо се използва разделител със съхранена процедура в mysql?