sql >> データベース >  >> RDS >> Mysql

データベースからより多くのアイテムをロードする〜無限スクロール

    これは非常に複雑な質問です。独自のバリエーションを最初からコーディングする前に、 InfiniteScrolljQueryプラグイン 。それでも問題が解決しない場合は、次の解決策が考えられます。

    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コードは、リストに表示されている最後のエントリのIDを使用してAJAXGETリクエストをphpスクリプトに送信します。 PHPスクリプトは、そのIDの後に続く30個のエントリを返します。元のJavascriptファイルには、PHPコードが少し含まれていました。その目的がわからないので、それを削除しました(おそらく、PHPスクリプトからJSを出力していますか?)。また、XMLHttpRequest全体 コードは$.get()に短縮できます 関数。とにかくjQueryを使用しているので、車輪の再発明をする必要はありません。 data-idを使用しました エントリIDを送信する属性。これはHTML5固有の属性です。使用したくない場合は、idを使用してください。 代わりに、IDを数字で始めることはできないことに注意してください。接頭辞として文字を付ける必要があります。

    PHPスクリプトでは、mysqliを使用しました mysql_*の代わりに 機能。 mysqliを使用する必要があります またはPDO 今後は、(現在は非推奨の)mysql_*よりも信頼性と安全性が高いためです。 。 PHPのインストールには、これらの拡張機能がすでに含まれている可能性があります。データベースクエリエラーを処理しなかったことに注意してください。そのコードは自分で書くことができます。他の種類のエラーが発生した場合は、ここに投稿してください。修正を試みます。




    1. to_date()がPostgreSQLでどのように機能するか

    2. SQL ServerのSYSUTCDATETIME()とGETUTCDATE():違いは何ですか?

    3. CentOS7にMariaDB10をインストールして保護する方法

    4. 2つのクエリの合計