infinite scroll php

Solutions on MaxInterview for infinite scroll php by the best coders in the world

showing results for - "infinite scroll php"
03 Aug 2017
1<?php
2
3    $pageno = $_POST['pageno'];
4
5    $no_of_records_per_page = 10;
6    $offset = ($pageno-1) * $no_of_records_per_page;
7
8    $conn=mysqli_connect("localhost","my_user","my_password","my_db");
9    // Check connection
10    if (mysqli_connect_errno()){
11        echo "Failed to connect to MySQL: " . mysqli_connect_error();
12        die();
13    }
14
15    $sql = "SELECT * FROM table LIMIT $offset, $no_of_records_per_page";
16    $res_data = mysqli_query($conn,$sql);
17
18    while($row = mysqli_fetch_array($res_data)){
19
20        echo '<div>Demo'.$row["id"].'</div>';
21
22    }
23
24    mysqli_close($conn);
25
26?>
27
28
29<!DOCTYPE html>
30<html>
31<head>
32    <title>Infinite Scroll Demo</title>
33
34    <!-- JQuery CDN -->
35    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
36
37    <!-- Inview Js (jquery.inview.js) -->
38    <script src="jquery.inview.js"></script>
39
40    <style>
41        #response div{
42            border: 1px solid lightgrey;
43            height: 80px;
44            margin-bottom: 5px;
45            padding: 50px 0px 0px 0px;
46            text-align: center;
47        }
48        #loader{
49            display: block;
50            margin: auto;
51        }
52    </style>
53</head>
54<body>
55
56    <div id="response">
57
58        <!-- response(next page's data) will get appended here -->
59
60        <!--we need to populate some initial data-->
61        <?php
62            $conn=mysqli_connect("localhost","my_user","my_password","my_db");
63            // Check connection
64            if (mysqli_connect_errno()){
65                echo "Failed to connect to MySQL: " . mysqli_connect_error();
66                die();
67            }
68            $sql = "SELECT * FROM table LIMIT 5";
69            $res_data = mysqli_query($conn,$sql);
70            while($row = mysqli_fetch_assoc($res_data)){
71                echo '<div>Demo'.$row["id"].'</div>';
72            }
73            mysqli_close($conn);
74        ?>
75    </div>
76
77     <input type="hidden" id="pageno" value="1">
78     <img id="loader" src="loader.svg">
79     <script>
80         $(document).ready(function(){
81             $('#loader').on('inview', function(event, isInView) {
82                 if (isInView) {
83                     var nextPage = parseInt($('#pageno').val())+1;
84                     $.ajax({
85                         type: 'POST',
86                         url: 'pagination.php',
87                         data: { pageno: nextPage },
88                         success: function(data){
89                             if(data != ''){							 
90                                 $('#response').append(data);
91                                 $('#pageno').val(nextPage);
92                             } else {								 
93                                 $("#loader").hide();
94                             }
95                         }
96                     });
97                 }
98             });
99         });
100     </script>
101</body>
102</html>
source