Display inside tag correctly

Display inside tag correctly

I have seen a lot about parent tags, and I really do not understand the reason for not returning the result correctly within the id informed.

In my test I have two columns with class `.col`, one column has the form, and the other column contains the table list.

Form And table list



All page content displayed within the id = "ajaxList". The screen looks like this after the first click, and clicking on the other links ajax continues to load the correct contents of each number.






Jquery

  1.     $(".page-link").click(function (e) {
  2.        e.preventDefault();
  3.     
  4.        var url = $(this).attr("data-href");
  5.     
  6.        $( "body #ajaxList" ).load( url + "#ajaxList" );
  7.     
  8.     })

Console:


 [Deprecation] Synchronous XMLHttpRequest on the main thread is  deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.


I tried in several ways to inform the parents sequence but it does not work, it only works if it displays directly in the `'body'` without specifying some `id` or `class`

  1.     $( "#ajaxList" )
  2.     
  3.     $( "body #ajaxList" )
  4.     
  5.     $( "body .col #ajaxList" )
  6.     
  7.     $( "html body .col #ajaxList" )

I am using `jquery-3.2.1`


crud.class.php

  1.     public function paging($query,$records_per_page)
  2.      {
  3.      $starting_position=0;
  4.      if(isset($_GET["page_no"]))
  5.      {
  6.      $starting_position=($_GET["page_no"]-1)*$records_per_page;
  7.      }
  8.      $query2=$query." limit $starting_position,$records_per_page";
  9.      return $query2;
  10.      }
  11.     
  12.      public function paginglink($query,$records_per_page)
  13.      {
  14.      $self = $_SERVER['PHP_SELF'];
  15.     
  16.      $stmt = $this->db->prepare($query);
  17.      $stmt->execute();
  18.     
  19.      $total_no_of_records = $stmt->rowCount();
  20.     
  21.      if($total_no_of_records > 0)
  22.      {
  23.      ?><ul class="pagination"><?php
  24.      $total_no_of_pages=ceil($total_no_of_records/$records_per_page);
  25.     
  26.      $current_page=1;
  27.     
  28.      if(isset($_GET["page_no"]))
  29.      {
  30.      $current_page=$_GET["page_no"];
  31.      }
  32.      if($current_page!=1)
  33.      {
  34.      $previous =$current_page-1;
  35.      echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=1'>First</a></li>";
  36.      echo "<li class='page-item'><a  href='#' class='page-link' data-href='".$self."?page_no=".$previous."'>Previous</a></li>";
  37.      }
  38.      for($i=1;$i<=$total_no_of_pages;$i++)
  39.      {
  40.      if($i==$current_page)
  41.      {
  42.      echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$i."' style='color:red;'>".$i."</a></li>";
  43.      }
  44.      else
  45.      {
  46.      echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$i."'>".$i."</a></li>";
  47.      }
  48.      }
  49.      if($current_page!=$total_no_of_pages)
  50.      {
  51.      $next=$current_page+1;
  52.      echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$next."'>Next</a></li>";
  53.      echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$total_no_of_pages."'>Last</a></li>";
  54.      }
  55.      ?></ul><?php
  56.      }
  57.      }
    
   
 index.php
    

  1.     <table class="table table-hover" id="ajaxList">
  2.       <thead>
  3.      <tr>
  4.       <th >#</th>
  5.       <th style="display:none">id</th>
  6.       <th>Name</th>
  7.       <th>Email</th>
  8.       <th>Tel</th>
  9.       <th>City</th>
  10.       <th>Contry</th>
  11.        
  12.      </tr>
  13.       </thead>
  14.       <tbody >
  15.     
  16.      <?php
  17.      $query = "SELECT * FROM crud ORDER BY id DESC";       
  18.      $records_per_page=7;
  19.      $newquery = $crud->paging($query,$records_per_page);
  20.      $crud->dataview($newquery);
  21.      ?>
  22.      <tr>
  23.      <td colspan="7" align="center">
  24.      <nav aria-label="Page navigation example">
  25.      <?php $crud->paginglink($query,$records_per_page); ?>
  26.      </nav>
  27.      </td>
  28.      </tr>
  29.       </tbody>  
  30.      </table>