Limiting rows of table and appending rows - php

Question

In this code I am getting posts from database in table, table displays posts in three columns, now I want to add some jQuery to limit the number of rows and add a button which on clicking appends few rows to table I am not a professional programmer may be something like slice should be used to limit number of rows.
$sql = "SELECT * FROM posts";
$query = $db->prepare($sql);
$query->execute();
<table>
<tr>
<?php do { //horizontal looper?>
<td>
<div>id</div>
<div>title</div>
<div>body</div>
<div>date</div>
</td>
<?php
$row = $query->fetch(PDO::FETCH_ASSOC);
if (!isset($nested_List)) {
$nested_List= 1;
}
if (isset($row) && is_array($row) && $nested_List++%3==0) {
echo "</tr><tr>";
}
} while ($row); //end horizontal looper
?>
</table>

Answer 1

HTML
Create your table (You can also create dynamically)
<table id='posts'>
<tbody></tbody>
</table>
<button id='load-more-entries'>Load</button>
JavaScript
Create a variable for keeping track of what result you are on. What the index of the last result you grabbed.
Grab the elements by id. attach listener to button so when you click you load more results. Take a look at AJAX documentation. It is very simple and short.
var index = 0;
var load, table;
load = document.getElementById('load_more_entries'),
table = document.getElementById('posts');
load.addEventListener('click', function(e){
processAjaxRequest({
type: 'get',
url: "posts.php?index="+index,
success: function(xmlhttp){
var results = JSON.parse(xmlhttp.response);
for(var i = 0; i < results.length; ++i){
var row = table.insertRow();
var cell = row.insertCell(cell_index);
//increment index according to how many results you
grab so next time you grab the next results
index++;
}
},
error: function(xmlhttp){
//Handle error
}
});
});
/*
this function here it is a a wrapped AJAX
it will call php file below and run it. It will fetch the results
form database and return them to you in form of a string. You need
to parse it JSON.parse() to turn it into an array
*/
function processAjaxRequest(object){
var xmlhttp = new XMLHttpRequest() ||
new ActiveXObject('Microsoft.XMLHTTP');
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status === 200){
object.success(xmlhttp);
}else{
object.error(xmlhttp);
}
}
}
xmlhttp.open(object.type, object.url, true);
xmlhttp.setRequestHeader('Content-type',
'application/x-www-form-urlencoded');
xmlhttp.send(object.args);
};
PHP
This file is called by processAjaxResquest
$posts = array();
while($post = mysqli_fetch_assoc($sql)){
$posts[] = $post;
}
echo json_encode($posts);
?>
*NOTE I have not tested the code there maybe a couple of thing I may have left of. However, this should be enough to get you started. I got the same kind of answer when I had this question. Also, note that there is also more things you need to be aware of; like checking the variables inside PHP file are set before you do anything.