为阵列加载更多按钮

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 :)

Answer 1

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.