title: My offset seems to be working but pagination is showing the same listings on every page
body: <p>I'm making a page that lists items from a SQL database. My pagination uses inView to load the next page when an image is in view. For some reason the first page (Page 1) keeps loading after the initial page (FilterData.php) no matter how much I scroll but the page number is changing.</p>
  
  <p>I'm embarrassed to say I've been trying to debug this for about 3 weeks. Can anyone help me figure out what i'm doing wrong?</p>
  
  <p><strong>Inventory.php</strong> - Acts as index for this project</p>
  
  <pre><code>
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  
  
      &lt;meta name="Resource-type" content="Document" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" /&gt;
  
      &lt;!-- jQuery CDN --&gt;
      &lt;script src="vendors/js/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- jQuery UI JS --&gt;
      &lt;script src="vendors/js/jquery-ui-1.12.1.custom/jquery-ui.js"&gt;&lt;/script&gt;
  
      &lt;!-- InView JS (jquery.inview.js) --&gt;
      &lt;script src="vendors/js/jquery.inview-master/jquery.inview.js"&gt;&lt;/script&gt;
  
      &lt;!-- Infinite scroll --&gt;
      &lt;script src="vendors/js/InfiniteScroll.js"&gt;&lt;/script&gt;    
  
      &lt;!-- Search filter --&gt;
      &lt;script type="text/javascript" src="vendors/js/Filters/Search.js"&gt;&lt;/script&gt;
      &lt;!-- Filters --&gt;
      &lt;script type="text/javascript" src="vendors/js/Filters/Filters.js"&gt;&lt;/script&gt;
  
      &lt;!-- jQuery UI CSS --&gt;  
      &lt;link rel="stylesheet" href="vendors/css/jquery-ui.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="StoneContainer"&gt;
  
              if($query-&gt;num_rows &gt; 0){
  
                  //Data goes here
              }
  
          ?&gt;
  
      &lt;/div&gt;
  
      &lt;!-- Next page load at NextPage.php --&gt;
      &lt;div class="LoaderContainer"&gt;
  
          &lt;input type="hidden" id="pageno" value="1"&gt;
          &lt;img id="Loader" src="../imgs/loader.gif"&gt;
  
      &lt;/div&gt;  
  
      &lt;!-- Filters --&gt;
      &lt;?php include 'vendors/php/Filters/Filters.php'; ?&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  </code></pre>
  
  <p><strong>NextPage.php</strong> - Here is the PHP [pagination] page that the inView AJAX (InfiniteScroll.js) requests</p>
  
  <pre><code>
  &lt;?php
  
      if(isset($_GET['pageno'])) {
          $pageno = $_GET['pageno'];
      } else {
          $pageno = $_POST['pageno'];
      }
  
      $limit = 10;
      $offset = ($pageno&gt;1) * $limit;
  
      //Include database configuration file
      include('dbConfig.php');
  
      $SQL = "        
              SELECT
                  number,
                  image1,
                  wt,
                  length,
                  width,
                  CASE
                      WHEN stonetype = 'SA' THEN 'Sapphire'
                      WHEN stonetype = 'RU' THEN 'Ruby'
                      WHEN stonetype = 'TML-P' THEN 'Paraiba'
                      WHEN stonetype = 'EM' THEN 'Emerald'
                      WHEN stonetype = 'TS' THEN 'Tsavorite'
                      WHEN stonetype = 'SI' THEN 'Spinel'
                      WHEN stonetype = 'GT' THEN 'Garnet'
                      WHEN stonetype = 'BER' THEN 'Beryl'
                      WHEN stonetype = 'TML' THEN 'Tourmaline'
                      WHEN stonetype = 'KO' THEN 'Kornerupine'
                      ELSE 'n/a'
                  END AS 'stonetype',
                  CASE                                    
                      WHEN enhcode = 'H' THEN 'Heated'
                      WHEN enhcode = 'N' THEN 'Unheated'
                      ELSE 'n/a'
                  END AS 'enhcode'
              FROM 
                  stones
              WHERE 
                  wt &gt;= 2.5
      ";
  
      if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) &amp;&amp; !empty($_POST["minimum_wt"]) &amp;&amp; !empty($_POST["maximum_wt"])) {
  
          $SQL .= "
  
              AND wt BETWEEN '".$_POST["minimum_wt"]."' AND '".$_POST["maximum_wt"]."'
  
          ";
      }
  
      if(isset($_POST["shape"])) {
  
          $shape_filter = implode("','", $_POST["shape"]);
  
          $SQL .= "
  
              AND stoneshape IN('".$shape_filter."') 
  
          ";
  
      }
  
      if(isset($_POST["color"])) {
  
          $color_filter = implode("','", $_POST["color"]);
  
          $SQL .= "
  
              AND stonecolor IN('".$color_filter."')
  
          ";
  
      }
  
      if(isset($_POST["enhancement"])) {
  
          $enhancement_filter = implode("','", $_POST["enhancement"]);
  
          $SQL .= "
  
              AND enhcode IN('".$enhancement_filter."')
  
          ";
  
      }
  
      if(isset($_POST["matching"])) {
  
          $matching_filter = implode("','", $_POST["matching"]);
  
          $SQL .= "
  
              AND pair IN('".$matching_filter."')
  
          ";  
  
      }
  
      $SQL .= " 
  
          ORDER BY
              wt ASC
          LIMIT
              " . $offset. ",
              " . $limit. "
  
      ";
  
      $res_data = mysqli_query($db, $SQL);
  
      if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) &amp;&amp; !empty($_POST["minimum_wt"]) &amp;&amp; !empty($_POST["maximum_wt"]) &amp;&amp; isset($_POST["shape"]) &amp;&amp; isset($_POST["color"]) &amp;&amp; isset($_POST["enhancement"]) &amp;&amp; isset($_POST["matching"])) {
  
          while($row = mysqli_fetch_array($res_data)) {
  
              echo '&lt;div class="Stone"&gt;';
                  echo'pg. # '; echo $pageno; // temporarily telling me what page the iteration is on
  
                  // landing page
                  echo '&lt;a href="Item.php?number='. $row['number'].'"&gt;';
  
                      // image
                      echo '&lt;div class="StoneData StoneIMG"&gt; &lt;img src="../../' . $row['image1']. '"&gt; &lt;/div&gt;';
  
                      // weight 
                      echo '&lt;div class="StoneData"&gt;' . $row['wt']. 'Ct&lt;/div&gt;';
  
                      // type
                      echo '&lt;div class="StoneData"&gt;' . $row['stonetype']. '&lt;/div&gt;';
  
                      // enhancement
                      echo '&lt;div class="StoneData"&gt;' . $row['enhcode']. '&lt;/div&gt;';
  
                      // dimensions
                      echo '&lt;div class="StoneData"&gt;' . $row['length']. ' x ' . $row['width']. '&lt;/div&gt;';
  
                      // item number
                      echo '&lt;div class="StoneData"&gt;# ' . $row['number']. '&lt;/div&gt;';
  
                  echo '&lt;/a&gt;';
  
              echo '&lt;/div&gt;'; 
  
          }
  
      }
  
      else {
  
          echo '';
  
      }
  
  ?&gt;
  
  </code></pre>
  
  <p><strong>InfiniteScroll.js</strong> - Here is the AJAX request that loads the NextPage.php when an image is inView</p>
  
  <pre><code>
  //Infinite scroll
  $(document).ready(function(){
  
      $('#Loader').on('inview', function(event, isInView) {
  
          if (isInView) {
  
              var nextPage = parseInt($('#pageno').val()) + 1;
  
              //Filters
              var minimum_wt = $('#hidden_minimum_wt').val();
              var maximum_wt = $('#hidden_maximum_wt').val();
              var shape = get_filter('shape');
              var color = get_filter('color');
              var enhancement = get_filter('enhancement');
              var matching = get_filter('matching');
  
              $.ajax({
  
                  type: 'POST',
                  url: 'vendors/php/NextPage.php',
                  data: {
                      pageno: nextPage,
                      minimum_wt: minimum_wt,
                      maximum_wt: maximum_wt,
                      shape: shape,
                      color: color,
                      enhancement: enhancement,
                      matching: matching
                  },
                  success: function(data){
  
                      if(data != ''){
                          $('#StoneContainer').append(data);
                          $('#pageno').val(nextPage);
                      } else {
                          $('.LoaderContainer').hide();
                      }
  
                  }
  
              });
  
          }
  
      });
  
  });
  
  
  //Checking applied filters
  function get_filter(class_name) {
  
      var filter = [];
  
      $('.'+class_name+':checked').each(function(){
          filter.push($(this).val());
      });
  
      return filter;
  
  }
  
  </code></pre>
  
  <p>The value of id="pageno" does increase by 1 every time InfiniteScroll.js fires (as expected) but the listings remain the same as page 1</p>