Load more button for array

Question

I have an array $users

$statement = $pdo->prepare("SELECT * FROM activity");
$statement->execute();
$users = $statement->fetchAll();

and I display it like so

<?php
foreach ($users as $key => $row) {

    $dist = 0.0;
            $x1 = $lng;
            $x2 = $row['alng'];
            $y1 = $lat;
            $y2 = $row['alat'];

            $dist = acos(sin($x1=deg2rad($x1))*sin($x2=deg2rad($x2))+cos($x1)*cos($x2)*cos(deg2rad($y2) - deg2rad($y1)))*(6378.137);
            $distn = FLOOR ( ROUND($dist,1) * 2 ) / 2 ; //calculate distn

    $users[$key]['dist'] = $distn; //add dist to array foreach value
}

array_multisort(array_column($users, 'dist'), SORT_ASC, $users); / sort array with dist

foreach($users as $row) { 

?>

<article class="mainusers" id="actvtar">
    <div class="actvtinfo">
        <a class="actvtsnm" href="actvt.php?id=<?php echo ($row['aid']);?>"><?php echo $row['title']; ?></a>

    </div>

    <a class="titlepic" href="actvt.php?id=<?php echo ($row['aid']);?>">
            <img  class="actvtpb" src="./activitys/<?php echo ($row['title']); ?>/activitypic.jpg" alt="Bild nicht gefunden" onerror="this.src='./img/no_title.png';"></img>
        </a>

    <div class="actvtfooter">

        <p id="ua">Tags:</p>
        <p class="tags" id="actvttags"  name="interest"><?php echo $row['interest'];?></p>
        <p id="actvtsdist"><?php echo $row['dist']; ?>km entfernt</p>

    </div>

</article>

<?php }
?>

Now I want that the foreach loop is shown 5 times (5 items) and if I scroll to the bottom the next 5 are loaded. Just like Twitter, Instagram etc... How can I do that? I would appreciate it if you wouldnt mark this as duplicated because I searched for days now and I couldnt find an answear! Thanks for your help and have a great day :)

Your code contains only PHP. You need to display the records using `AJAX`. Also, to answer it would be too broad. What have you tried? What is not working? — Ionut Necula, Mar 02 '17 at 20:30
There are lots of tutorials on the web that can help. Have you googled anything? http://www.codexworld.com/load-more-data-using-jquery-ajax-php-from-database/ , http://stackoverflow.com/questions/25678303/load-more-content-using-ajax-jquery-by-returning-div — Ionut Necula, Mar 02 '17 at 20:33
I tried to select all users from my database and I calculated with the cordinations of each user the distance between them and me. Then I add this distance into the array foreach user and sort the array with that. So the closest user is shown first. Now I want to show only the first 5 and when I scroll to the bottom I want to load the next 5 so the browser doesnt chrashs if there are to much users in the db — Sentry, Mar 02 '17 at 20:46

score 0 · Accepted Answer · answered Mar 02 '17 at 21:20

Here is a general answer to your question.

First, what i would do is query for a limit of maybe 25 records and make your loop go over all 25.

The goal here is to wrap each 5 records inside a div with a numbered id, so put a counter in your loop that does this

ie

if ($count % 5 == 0) {
    echo ("</div><div id='mydiv_$myCounter'>");
}

See what i did there, i closed and then opened a new div so you'll have to start out with an opening div and end with a closing div.

Next, you'll want to hide all but the first div using css display:none. i'll let you figure that out.

And finally, once you have this, you'll need to write some javascript. The javascript (jQuery is great for this kind of thing) will need to look at the scroll event. something like this:

$(document).ready(function() {
    $(window).scroll(function() {
      // do whatever you need here.
    });
});

Once you have that, figure out at what scroll locations you need to load more data and use jQuery to either make the existing divs visible or load more data from the backend using ajax.

Sorry i can't be more specific but this is basically how it's done.

But then all things from the array are loaded but only style="display:none;" So the browser freezes if there are to many users — Sentry, Mar 10 '17 at 16:46
True, Yes if you have a very large set of data what you will also have to do is not only load more rows on to the end of the list but also remove them from the top as well, that way you won't end up with too much in the browser at once. Of course doing this means that you will have to possibly re-load data on to the top of the list if you scroll up again. I have actually done this before, my suggestion is to load about 3 times as much data as you need to see at one time, then put your reload points at about the 1/3 and 2/3 points, does that make sense? — Dallas Caley, Mar 10 '17 at 19:49

Load more button for array

1 Answers1