0

I am trying to make a scroll bar that loads only a select amount of elements at a time. Lets say i have 45 elements to show and one line for each element. I want to load the first 15 then scroll and then load another set of 15 element and so on and so forth.

This is currently written in a .php file and I am using a Div with the following "settings"

print("<div class='scrolldiv' style='width: 70vw; height: 90vh; overflow-y: scroll; margin-top: 4vh; margin-left: 4vw;'><table><hr><th>Set ID</th><th>Set Name</th><th>Category Name</th></hr> </div>");

All code is extremely WIP(work in progress)

<?php include("navbar.php"); 
?>

<?php   

    // Cencored the connection :)
    $connection =   mysqli_connect("Database","data","","data");        

    $search = $_GET['search'];


    $limit = $_GET['limit'];
    if ($limit == 0){
    $limit = 13361;
    }
    $counter = 0;



    $result = mysqli_query($connection, 
    "SELECT * FROM sets LIMIT $limit");

    print("<div class='scrolldiv' style='width: 70vw; height: 90vh; overflow-y: 
    scroll; margin-top: 4vh; margin-left: 4vw;'><table><hr><th>Set ID</th> 
    <th>Set Name</th><th>Category Name</th></hr> </div>");  

    while ($row =   mysqli_fetch_array($result)){ 


            $SetID =    $row['SetID'];  
            $Setname =  $row['Setname'];                                                                            
            print(" <div class='row'> <tr>
                    <td>$SetID</td> <td>$Setname</td> 
                    <td>$Quantity</td></tr> </div>");

            $counter = $counter + 1;
            $i = $i + 1;



    }   //  end while

    echo $counter;
    print("</table></div>");
    ?>

</body>

</html>
Tim Lewis
  • 27,813
  • 13
  • 73
  • 102
Edvin Nordin
  • 1
  • possible duplicate of https://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll – gogaz Dec 17 '18 at 15:15
  • You need to search about lazyloading – executable Dec 17 '18 at 15:15
  • 2
    What exactly is your question? All you've done is told us what you want. We have no idea what part is actually giving you trouble. And you need to be more specific than "I don't know how to do it" – Patrick Q Dec 17 '18 at 15:20
  • you should separate logic & layout .. a common issue with PHP. I would suggest having the empty DIV displayed by static HTML and then use some JS to query a PHP returning JSON to populate and add to the population of that DIV according to whatever triggers the +15 you speak of – flowtron Dec 17 '18 at 15:23

1 Answers1

0

You have to separate user interaction from backend logic. This problems is an user client interaction issue. @flowtron metioned it in the coments, you can achieve this by loading dinamically using jquery/javascript with and ajax call to the php file you have there.

Being said that, I don't recomend you using the scroll event to trigger a backend query, it will affect client experience. I do recomend creating a "load more" button wich will load next batch of data using the ajax call.

for example: 

$(document).on("click", "load_more", function(e){
var parameters = {"par1":pa1};
$.ajax({
    url: "backend_query.php",
    type: "post",
    data: parameters,
    success: function (response) {
        $("#scroll_div").append("<li>elements from response</li>");
    }
});

});

gogoz
  • 23
  • 9