jQuery「$.get()」を使ってページ最下部で追加データを取得
TwitterやFacebookのように一番下までスクロールしたら自動的に追加データを読み込んで表示する機能を実装した時のソースをメモ。サンプルはデータベース（Mysql）から10件づつデータを抽出。 HTML <ul class="items"> <?php require_once ('ini.php'); //DB接続ファイル $sql = $db->query('SELECT * FROM tbl_sample ORDER BY id DESC LIMIT 10'); while($row = $sql->fetch(PDO::FETCH_ASSOC)){ echo('<li id="'.$row['id'].'">'.($row['name']).'</li>'); } ?> </ul> jQuery $(window).on('scroll', function(){ var doch = $(document).innerHeight(); //ページ全体の高さ var winh = $(window).innerHeight(); //ウィンドウの高さ var bottom = doch - winh; //ページ全体の高さ - ウィンドウの高さ = ページの最下部位置 if(bottom * 0.9 < $(window).scrollTop()){ var obj = $(this); if (!obj.data('loading')) { obj.data('loading', true); $.get('loadmore.php', {lastid:$('ul.items li:last-of-type').attr('id')}, function(result){ $('ul.items').append(result); obj.data('loading', false); }); } } }); スクロール時のイベントの重複防止に、最初にイベントが発生した時点でのみobj.dataの「loading」をtrueに設定。 TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」 PHP （loadmore.php）追加読み込み用ファイル //追加読み込みの処理 require_once ('ini.php'); //DB接続ファイル $lastid = $_GET['lastid']; if(!empty($lastid)){ $sql = $db->prepare('SELECT * FROM tbl_sample WHERE id < :id ORDER BY id DESC LIMIT 10'); $sql->bindValue(':id', $lastid, PDO::PARAM_INT); $sql->execute(); while($row = $sql->fetch(PDO::FETCH_ASSOC)){ echo('<li id="'.$row['id'].'">'.($row['name']).'</li>'); } }
