前提・実現したいこと
最新版のinfinitscrollv3でtwitterのようなスクロールを実装したいのですが動きません。
現在はphpでデータベースからデータを取得しページングを作成するというところまでは出来ております。
公式サイトを参考にしつつ下記設定を試しておりますが機能しません。
このページングを利用したinfinitscroll設定のアドバイスをいただけますと幸いです。
何卒宜しくお願い致します。
該当のソースコード
php
1 2<head> 3<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> 4<script> 5$('#chat').infiniteScroll({ 6 path: '$page={{#}}', 7 append: '.post', 8 hideNav: '.pagination', 9 responseType: 'php' 10}); 11</script> 12</head> 13<div id="chat"> 14<div class="post"> 15 16 17 <?php 18 // PDOでDBに接続 19 $aaa_id=$_REQUEST['aaa_id']; 20 $bbb_id=$_REQUEST['bbb_id']; 21 22 $pdo=new PDO('mysql:host=localhost;dbname=xxx;charset=utf8', 'root', ''); 23 24 // GETで現在のページ数を取得する(未入力の場合は1を挿入) 25 if (isset($_REQUEST['page'])) { 26 $page = (int)$_REQUEST['page']; 27 } else { 28 $page = 1; 29 } 30 31 // スタートのポジションを計算する 32 if ($page > 1) { 33 // 例:2ページ目の場合は、『(2 × 10) - 10 = 10』 34 $start = ($page * 10) - 10; 35 } else { 36 $start = 0; 37 } 38 39 // postsテーブルから10件のデータを取得する 40 $posts = $pdo->prepare("select * from users inner join posts on users.user_id = posts.user_id where posts.circle_id={$circle_id} order by posts.create_date desc limit {$start},10"); 41 $posts->execute(); 42 $posts = $posts->fetchAll(PDO::FETCH_ASSOC); 43 44 foreach ($posts as $row) { 45 46 47 48 49 echo '<p class="clearfix"> 50 <div class="chat-text clearfix">'; 51 52 53 if (empty($row['icon'])) { 54 55 echo '<div class="icon"><img src="../img/default_icon.svg" alt=""></div>'; 56 } else { 57 58 echo '<div class="icon"><img src="../img/'.$row['username'].'_'.$row['user_id'].'.jpg" alt=""></div>'; 59 } 60 61 62 63 echo '<div class="chatMessage"><span class="name">'.$row['username'].'</span> 64 <p class="date">'.$row['create_date'].'</p> 65 <p>'.$row['posts_article'].'</p> 66 </div> 67 </div> 68 </p>'; 69 } 70 71 // postsテーブルのデータ件数を取得する 72 $page_num = $pdo->prepare("SELECT COUNT(*) post_id FROM posts"); 73 $page_num->execute(); 74 $page_num = $page_num->fetchColumn(); 75 76 // ページネーションの数を取得する 77 $pagination = ceil($page_num / 10); 78 79 ?> 80 81 <?php for ($x=1; $x <= $pagination ; $x++) { 82 echo '<div class="pagination"><a class="pagination__next" href="./index.php?aaa_id='.$aaa_id.'&bbb_id='.$bbb_id.'&page='.$x.'">next</a></div>'; 83 } // End of for 84 ?> 85 86 </div> 87</div>
補足情報(FW/ツールのバージョンなど)
PHP のバージョン: 7.1.13
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。