Counting paragraphs with pagination - php

Question

I’ve just started learning PHP and have attempting to build my first data driven web page to aid with my learning but I now seem to have come across a problem that's been driving me nuts.
Here is a bit of background.
What I have been attempting to do is pull content from a database, this content is already marked up with html paragraph tags. The content will be user submitted and so I have no way of knowing how many paragraphs each row will contain.
I am then looping through the content and counting the paragraphs so that I end up with 5 paragraphs inside each containing div.
Here is the code I am using to do this, I know my code is a bit basic but it seems to work fine as long as all of the content is retrieved in just a single query.
$stmt = $db->prepare('SELECT * FROM content');
$stmt->execute();
foreach($stmt as $row) {
$allParagraphs .= $row['content'];
}
$paragraphArray = explode("</p>", $allParagraphs);
$paragraphCount = 0;
echo '<div class="bookPage">';
foreach ($paragraphArray as $value) {
echo $value;
$paragraphCount = $paragraphCount + 1;
if ($paragraphCount == 5){
echo '</div><div class="bookPage">';
$paragraphCount = 0;
}
}
echo '</div>';
And now my problem.
Now I would like to include pagination with an endless scroll effect using PHP and Jquery. I feel confident enough to do this; however, I have noticed that the current code I am using (to count every 5 paragraphs) is not going to work when I introduce pagination.
As far as I can see, after working through the code what is going to happen is that the closing div is going to be inserted and then, when the 2nd query made via ajax (read more link clicked) it is going to result in a new opening div. This results in the leftover paragraphs from each query being surrounded by the div tag and not containing the 5 paragraphs I need.
Basically, in its simplest terms, what I would like to do is to still be able to wrap div tags around every 5 paragraphs but also still be able to paginate the results via ajax.
If anyone could advise me of the best way to go with this it would be very much appreciated.
My musings on this issue so far...
I am not sure if this is even possible to do which leads me to believe I have approached this the wrong way. I’m not very experienced at the moment but I can’t help think that it would be easier to store every paragraph in a separate row in the database which would allow me to then pull them out in multiples of 5. But then, something else is telling me that would not be a practical solution at all, especially as I have no way of knowing how many paragraphs each user would be writing/submitting.
I dont have enough points to post an image so here is a link to an image i uploaded in attempt to demonstrate what i mean should my attempt at describing the issue not be enough.
Diagram showing issue
Thank you in advance of any suggestions.

Answer 1

I guess you could remove all the HTML tags in your PHP script and just return the content of the paragraphs as JSON object, for example.
So, basically, you'd return something like:
echo json_encode($paragraphArray);
And request that with jQuery like this (which is an adoption of the first example at http://api.jquery.com/jQuery.getJSON/):
jQuery.getJSON('yourURL.php', function(data) {
var items = [];
jQuery.each(data, function(key, val) {
items.push('<p>' + val + '</p>');
if(items.length == 5) {
appendItemsToBody(items);
items = [];
}
});
appendItemsToBody(items);
});
function appendItemsToBody(items) {
if(items.length) {
jQuery('<div/>', {
'class': bookPage,
html: items.join('')
}).appendTo('body');
}
}
Depending on what should happen when clicking on "load more", you could pass the count of currently displayed items as data to the call to your PHP script via jQuery.getJSON() (see their API documentation) and then decide in your PHP script which paragraphs you should return (i.e. where to start from). You'd have to append the "rest" of the paragraphs to fill up the 5 items to the existing last div in jQuery, and put the rest into new divs.