Populate table contents from PHP array using AJAX

I have a table as below;

<table>
<tr>
<td id="prev">prev</td>
<td class="content"></td>
<td class="content"></td>
<td class="content"></td>
<td class="content"></td>
<td class="content"></td>
<td id="next">next</td>
</tr>
</table>

and a PHP file, ajax.php for AJAX calls as;

<?php
$array = array(1,2,3,4,5,6,7,8,9,10);
$page = $_POST["page"];
$quantity = 5;
$offset = ($page-1)*$quantity;
$selectedFiles = array_slice($array, $offset, $quantity);
echo $selectedFiles;
?>

The PHP function is suppose to return an array with a limited number of elements with respect to $_POST["page"] like in pagination. The script will return first 5 elements for $page = 1, second 5 elements for $page = 2, etc..etc.. When page loads, the <td>s having id content may display 1,2,3,4 and 5 respectively.

When user click next, it may display next results and may return to previous result if user click prev. How can I do this using JavaScript using jQuery?

It will be more helpful if some effect is given when user clicks and data changes, like sliding (transition), so that it will look like sliding some bar.

Answer

Save yourself a TON of time. Use a pre-done grid solution like DataTables that does all this work for you. It allows you to sort, filter, paginate, order, and limit your table results that can be fed via the dom, JSON, or true server-side AJAX.

Since DataTables is such a mature project, it has already overcome all the random issues with cross-browser quirks, etc.

It also includes a pre-done PHP example with the query done for you. Just change to match your table, and voila!