title: How to display the page with ajax?
body: <p>I have a pagination that works correctly even I have added a filter to paginate more rows on the same page is to say that through the filter I can show 10 or 50 rows.</p>
  
  <p>The small defect that I have in my code is that the page is reloaded, changing how many rows show and the same happens in the buttons of the pagination.</p>
  
  <p>This is my code, everything is working on the same page <strong>index2.php</strong>.</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div class="container"&gt;
          &lt;div id="news-header" class="bootgrid-header container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-12 actionBar"&gt;
                      &lt;div class="search-bar"&gt;
                          &lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?"&gt;
                      &lt;/div&gt;
                      &lt;div class="actions btn-group"&gt;
                          &lt;?php
                              $select_quantity = '';
                              if (isset($_POST['amount_show'])) :
                                  $select_quantity = $_POST['amount_show'];
                              endif;
                          ?&gt;
                          &lt;form method="post" action="&lt;?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?&gt;"&gt;
                              &lt;select id="amount_show" name="amount_show" onchange="this.form.submit()"&gt;
                                  &lt;option value="10" &lt;?php if ($select_quantity==10) echo "selected"; ?&gt;&gt;10&lt;/option&gt;
                                  &lt;option value="25" &lt;?php if ($select_quantity==25) echo "selected"; ?&gt;&gt;25&lt;/option&gt;
                                  &lt;option value="50" &lt;?php if ($select_quantity==50) echo "selected"; ?&gt;&gt;50&lt;/option&gt;
                                  &lt;option value="100" &lt;?php if ($select_quantity==100) echo "selected"; ?&gt;&gt;100&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;?php
              if (isset($_GET['page'])) :
                  $page = $_GET['page'] ?: '';
              else :
                  $page = 1;
              endif;
  
              if (isset($_POST['amount_show'])) :
                  $records_by_page = $_POST['amount_show'];
              else :
                  $records_by_page = 10;
              endif;
  
              $localization_sql = ($page-1) * $records_by_page;
  
              $sql = "SELECT id,title,description
                      FROM news
                      ORDER BY id DESC LIMIT $localization_sql, $records_by_page";
              $stmt = $con-&gt;prepare($sql);
              $stmt-&gt;execute();
              $stmt-&gt;store_result();
              if ($stmt-&gt;num_rows&gt;0) :
  
              echo '&lt;table id="myTable" class="table table-condensed table-hover table-striped bootgrid-table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Id&lt;/th&gt;
                      &lt;th&gt;Title&lt;/th&gt;
                      &lt;th&gt;Description&lt;/th&gt;
                      &lt;th&gt;Action&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;';
  
              $stmt-&gt;bind_result($id,$title,$description);
              while ($stmt-&gt;fetch()) :
                  echo '&lt;tr&gt;
                      &lt;td&gt;'.$id.'&lt;/td&gt;
                      &lt;td&gt;'.$title.'&lt;/td&gt;
                      &lt;td&gt;'.$description.'&lt;/td&gt;
                      &lt;td&gt;Edit&lt;/td&gt;
                  &lt;/tr&gt;';
              endwhile;
              echo '&lt;/tbody&gt;';
              echo '&lt;/table&gt;';
              $stmt-&gt;close();
  
  
              $sql = "SELECT * FROM news";
              $stmt = $con-&gt;prepare($sql);
              $stmt-&gt;execute();
              $stmt-&gt;store_result();
  
              $BD_records = $stmt-&gt;num_rows;
              $stmt-&gt;close();
              $con-&gt;close();
  
              $total_page = ceil($BD_records / $records_by_page);
              $prev = $page - 1;
              $next = $page + 1;
              echo '&lt;div class=pagination&gt;
              &lt;ul class="pagination"&gt;';
              if ($prev &gt; 0) :
                  echo "&lt;li&gt;&lt;a href='index2.php?page=1'&gt;&lt;i class='icon-angle-double-arrow'&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;";
                  echo "&lt;li&gt;&lt;a href='index2.php?page=$prev'&gt;&lt;i class='icon-angle-left'&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;";
              endif;
  
              for ($i=1; $i&lt;=$total_page; $i++) :
                  if ($page==$i) :
                      echo "&lt;li&gt;&lt;a class=active&gt;". $page . "&lt;/a&gt;&lt;/li&gt;";
                  else :
                      echo "&lt;li&gt;&lt;a href='index2.php?page=$i'&gt;$i&lt;/a&gt;&lt;/li&gt;";
                  endif;
              endfor;
  
  
              if ($page &lt; $total_page ) :
                  echo "&lt;li&gt;&lt;a href='index2.php?page=$next'&gt;&lt;i class='icon-angle-right'&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;";
                  echo "&lt;li&gt;&lt;a href='index2.php?page=$total_page'&gt;&lt;i class='icon-angle-double-right'&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;";
              endif;
  
              echo '&lt;/ul&gt;&lt;/div&gt;';
  
              else :
                  $stmt-&gt;close();
              endif;
  
          ?&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>While searching the web I found an ajax code, but sincerely, I did not manage the use ajax or javascript / jquery code.</p>
  
  <p>You can explain how to implement this ajax code or how to avoid the small defect of reloading the page.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {  
      $('.pagination li a').on('click', function(){
          /*$('.items').html('&lt;div class="loading"&gt;&lt;img src="images/loading.gif" width="70px" height="70px"/&gt;&lt;br/&gt;Loading...&lt;/div&gt;');*/
          $('.items').html('&lt;div class="loading"&gt;Loading...&lt;/div&gt;');
  
          var page = $(this).attr('data');        
          var dataString = 'page='+page;
  
          $.ajax({
              type: "GET",
              url: "ajax.php",
              data: dataString,
              success: function(data) {
                  $('.items').fadeIn(2000).html(data);
                  $('.pagination li').removeClass('active');
                  $('.pagination li a[data="'+page+'"]').parent().addClass('active');
  
              }
          });
          return false;
      });              
  });    
  &lt;/script&gt;
  </code></pre>
  
  <p>This is how my code works, as shown in the following image:</p>
  
  <p><a href="https://i.stack.imgur.com/1I1SH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1I1SH.png" alt="enter image description here"></a></p>