Question

I have a little script reading out a JSON feed and writing it down in HTML. Now I want my scirpt to only show 5 elements and load the next 5 elements with an forward button or to show the last 5 with a backward button Is there any possility to do that? Just give me a few pointers, where I could start my research for building a function like that.

My code till now, just to show you guys :

<script type="text/javascript">
$(function()
{
$(document).ready(function()
{
$.getJSON("json_data2.php",function(data)
{
$.each(data.posts, function(i,data)
{
var div_data =
"<div ><a href='"+data.url+"'>"+data.title+"</a></div>";
$(div_data).appendTo("#test");
});
}
);
return false;
});
});
</script>

<div id="test"></div>

Answer 1

Sounds like you’re trying to implement pagination. Generally this is best done on the server side. In your case this would be json_data2.php. You could have json_data2.php read 2 query strings called for example startPosition and amount. So startPosition can offset the list of items based on the number passed. Then amount would tell the json_data2.php how many items to return. Then each time next or previous is clicked the startPosition would be incremented or decremented.

So

json_data2.php?startPosition=0&amount=5 would return the first 5 results

Then

json_data2.php?startPositon=5&amount=5 would return the next 5 results.