title: Populate table contents from PHP array using AJAX
body: <p>I have a table as below;</p>
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
  &lt;td id=&quot;prev&quot;&gt;prev&lt;/td&gt;
  &lt;td class=&quot;content&quot;&gt;&lt;/td&gt;
  &lt;td class=&quot;content&quot;&gt;&lt;/td&gt;
  &lt;td class=&quot;content&quot;&gt;&lt;/td&gt;
  &lt;td class=&quot;content&quot;&gt;&lt;/td&gt;
  &lt;td class=&quot;content&quot;&gt;&lt;/td&gt;
  &lt;td id=&quot;next&quot;&gt;next&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>and a PHP file, <code>ajax.php</code> for AJAX calls as;</p>
  <pre><code>&lt;?php
  $array = array(1,2,3,4,5,6,7,8,9,10);
  $page = $_POST[&quot;page&quot;];
  $quantity = 5;
  $offset = ($page-1)*$quantity;
  $selectedFiles = array_slice($array, $offset, $quantity);
  echo $selectedFiles;
  ?&gt;
  </code></pre>
  <p>The PHP function is suppose to return an array with a limited number of elements with respect to <code>$_POST[&quot;page&quot;]</code> like in pagination. The script will return first 5 elements for <code>$page = 1</code>, second 5 elements for <code>$page = 2</code>, etc..etc.. When page loads, the <code>&lt;td&gt;</code>s having id <code>content</code> may display 1,2,3,4 and 5 respectively.</p>
  <p>When user click <code>next</code>, it may display next results and may return to previous result if user click <code>prev</code>. How can I do this using JavaScript using jQuery?</p>
  <p>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.</p>