title: AJAX, PHP & MYSQL- Limit Data Selection and Offset
body: <p>Okay so here my question i have a blog and i want to show user on first page only 5 posts so i execute this query </p>
  
  <pre><code> mysql_query("select * from posts  LIMIT 5");
  </code></pre>
  
  <p>And then after showing 5 post i made a button named as: <em>Show more posts</em></p>
  
  <p>when user click on that button another PHP file(loadmoreposts.php) executed in which i execute this query </p>
  
  <pre><code> mysql_query("select * from posts LIMIT 5 OFFSET 5");
  </code></pre>
  
  <p>but i want to show user 5 post every time it clicks on that button so i make this loop in my PHP script loadmoreposts.php  </p>
  
  <pre><code> include('dbConnectClass.php');
   $connect = new doConnect();
   $beforequery = mysql_query('select * from posts ORDER BY id DESC LIMIT 1;');
  
  if (mysql_num_rows($beforequery) &gt; 0) {
      $max_public_id = mysql_fetch_row($beforequery);
      $lastid =  $max_public_id[0]; //Here it is
  }else{
      $lastid =  "[0]";
  }
  echo "Last ID $lastid&lt;br /&gt;";
      $m=5; 
      for($n=5; $n&lt;=15; $n++): 
  
               $afterQuery = mysql_query("select * from posts LIMIT $m OFFSET $m");
              $m = $m+5;
  
              $result = "";
              while($row = mysql_fetch_assoc($afterQuery)){
              $result .= "&lt;div class='cd-timeline-block'&gt;";
              $result .="&lt;div class='cd-timeline-img cd-warning'&gt;";
              $result .=" &lt;i class='fa fa-pencil-square-o'&gt;&lt;/i&gt;";
              $result .="&lt;/div&gt;";
              $result .="&lt;div class='cd-timeline-content'&gt;";
              $result .= "&lt;h2&gt;{$row['title']}&lt;/h2&gt;
                          &lt;p&gt;{$row['content']}&lt;/p&gt;
                          &lt;img src='{$row['imagesrc']}' alt=''&gt;
                          &lt;br /&gt;
                          &lt;span style='font-size:85%;'' class='label label-primary'&gt;{$row['category']}&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;";
              }
              echo $result;
       endfor;
  </code></pre>
  
  <p>Let me explain what i did in this script, first i connect to database by a class then i grab last id of my post(last updated post) by running <strong>$beforequery</strong> and then one more time i execute another query named as <strong>$afterquery</strong> and then i get my results   </p>
  
  <p>but i don't want to show all my posts only in one click i want to show them 5 at a time when user click on that button like first five are already showing but clicking on button will show 5 more then after clicking again it will show the next 5 posts.
  this script is then grabbed by this AJAX script:</p>
  
  <pre><code>var loadmoreposts = function () {
          $.post('assets/includes/fetchMoreRows.php').done(function( data ) {
              $('#displaymoreposts').html(data);
              }); 
  }  
  </code></pre>
  
  <p>This <em>loadmoreposts();</em> fuction is running in <em>onload="loadmoreposts();"body tag</em></p>
  
  <p><strong>Any Suggestions and help will be appreciated :)</strong></p>
  
  <p>============================
     *EDITED**
     ===========================</p>
  
  <p>I removed the loop and added this but not working</p>
  
  <pre><code>include('dbConnectClass.php');
  $connect = new doConnect();
  
  
  $m = $_POST['offset'];
  
  
  
  
              $afterQuery = mysql_query("select * from posts LIMIT 5 OFFSET $m");
  
              $result = "";
              while($row = mysql_fetch_assoc($afterQuery)){
              $result .= "&lt;div class='cd-timeline-block'&gt;";
              $result .="&lt;div class='cd-timeline-img cd-warning'&gt;";
              $result .=" &lt;i class='fa fa-pencil-square-o'&gt;&lt;/i&gt;";
              $result .="&lt;/div&gt;";
              $result .="&lt;div class='cd-timeline-content'&gt;";
              $result .= "&lt;h2&gt;{$row['title']}&lt;/h2&gt;
                          &lt;p&gt;{$row['content']}&lt;/p&gt;
                          &lt;img src='{$row['imagesrc']}' alt=''&gt;
                          &lt;br /&gt;
                          &lt;span style='font-size:85%;'' class='label label-primary'&gt;{$row['category']}&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;" ;
              // $result .= "&lt;tr&gt;&lt;td&gt; {$row['name']}&lt;/td&gt;"."&lt;td&gt; {$row['password']}&lt;/td&gt;&lt;/tr&gt;&lt;/p&gt;";
              }
              echo $result;
  </code></pre>
  
  <p>and JS/AJAX script is now this </p>
  
  <pre><code>   var offsetValue = 0;
     var loadmoreposts = function () {
    $.post( 'assets/includes/fetchMoreRows.php', { offset: offsetValue} ).done(function( data ) {
      $('#displaymoreposts').html(data);
      offsetValue += 5;
    }); 
  } 
  </code></pre>