infinite scroll php
<?php $pageno = $_POST['pageno']; $no_of_records_per_page = 10; $offset = ($pageno-1) * $no_of_records_per_page; $conn=mysqli_connect("localhost","my_user","my_password","my_db"); // Check connection if (mysqli_connect_errno()){ echo "Failed to connect to MySQL: " . mysqli_connect_error(); die(); } $sql = "SELECT * FROM table LIMIT $offset, $no_of_records_per_page"; $res_data = mysqli_query($conn,$sql); while($row = mysqli_fetch_array($res_data)){ echo '<div>Demo'.$row["id"].'</div>'; } mysqli_close($conn); ?> <!DOCTYPE html> <html> <head> <title>Infinite Scroll Demo</title> <!-- JQuery CDN --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- Inview Js (jquery.inview.js) --> <script src="jquery.inview.js"></script> <style> #response div{ border: 1px solid lightgrey; height: 80px; margin-bottom: 5px; padding: 50px 0px 0px 0px; text-align: center; } #loader{ display: block; margin: auto; } </style> </head> <body> <div id="response"> <!-- response(next page's data) will get appended here --> <!--we need to populate some initial data--> <?php $conn=mysqli_connect("localhost","my_user","my_password","my_db"); // Check connection if (mysqli_connect_errno()){ echo "Failed to connect to MySQL: " . mysqli_connect_error(); die(); } $sql = "SELECT * FROM table LIMIT 5"; $res_data = mysqli_query($conn,$sql); while($row = mysqli_fetch_assoc($res_data)){ echo '<div>Demo'.$row["id"].'</div>'; } mysqli_close($conn); ?> </div> <input type="hidden" id="pageno" value="1"> <img id="loader" src="loader.svg"> <script> $(document).ready(function(){ $('#loader').on('inview', function(event, isInView) { if (isInView) { var nextPage = parseInt($('#pageno').val())+1; $.ajax({ type: 'POST', url: 'pagination.php', data: { pageno: nextPage }, success: function(data){ if(data != ''){ $('#response').append(data); $('#pageno').val(nextPage); } else { $("#loader").hide(); } } }); } }); }); </script> </body> </html>
