array_slice load remaining items - php

Question

I am returning a large array (of products), and am using array_slice to grab only the first 8 items.
I will implement a "See More" button, which will load the remaining items on the frontend for the user.
<?php
$split_output = array_slice($_associatedProducts, 0, 8); // returns set number of products in array (8), for more button
?>
My question is, how do I then return the remaining items in the array, following the 8 displayed? These items will then be displayed when the user clicks "See More".
Thanks in advance!

Answer 1

Instead of using array_slice, output all values of the array to the page but hide the values from the ninth value onwards (easily achievable with a foreach loop and a counter variable). Apply Javascript to unhide these values on the click of a button:
<?php
$_associatedProducts = array(); // then add values to the array
$num = 0;
foreach($_associatedProducts as $prod){
if(++$num <= 8){
print("<div>$prod</div>");
}
else{
print("<div class=\"more\" style=\"display:none;\">$prod</div>");
}
}
?>
<button type="button" id="myButton">See More</button>
<script type="text/javascript">
document.getElementById("myButton").onclick = function(){
var divs = document.getElementsByClassName("more");
var len = divs.length;
for(var i = 0; i < len; i++){
divs[i].style.display = "block";
}
this.style.display = "none";
}
</script>

Answer 2

Use this go get the remaining items:
$more_output = array_slice($_associatedProducts, 8);
Then place them inside a hidden div:
<div class="moreProducts">
Place your hidden Products here
</div>
Style:
.moreProducts {
display: none;
}
HTML Link:
More Products
jQuery:
$('a.showMore').bind('click', function() {
$('.moreProducts').show();
});
The above code is just an example. You have to change it to your needs.

Answer 3

You can slice the rest with the starting point of where you left. The ninth item (which is offset 8). If you don't supply the length to array_slice it will simply return all remaining items.
$remaining_items = array_slice($_associatedProducts, 8);
If you wan't to do this after the user clicks a link, there are many routes to take on this problem.
Getting the data Asynchronous with JS
Multiple pages, first page has LIMIT 0,8 in the query, the see more page does not.
Simply sending all data to the page, and make the remaining products initially hidden and show them with a button.
Many more...
Below an example of Simply sending all data to the page, and make the remaining products initially hidden and show them with a button.
Which can also be done in many ways, it's just an example.
Then when clicking see more... you can show the remaining items with javascript.
This way you don't even have to slice.
Example:
css:
.hide{
display:none;
}
php / html
<ul id="productlist">
<?php
$i=1;
foreach($_associatedProducts as $product){
$hide = ($i++>8)?' class="hide"':'';
echo "<li$hide>$product</li>";
}
?>
</ul>
<button id="seemore">See more..</button>
Will generate:
<ul id="productlist">
<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
<li>product 4</li>
<li>product 5</li>
<li>product 6</li>
<li>product 7</li>
<li>product 8</li>
<li class="hide">product 9</li>
<li class="hide">product 10</li>
</ul>
<button>See more..</button>
Now add jquery:
$('#seemore').on('click', function(){
$('#productlist>li.hide').removeClass('hide');
});