Anzeige innerhalb Tag richtig - JQuery

Question

Wenn ich auf die Paginierung Links alle Arbeiten korrekt, aber das einzige Problem ist, dass innerhalb des div id="ajaxList" zeigt wieder alle Inhalte der Seite

Form And table list

All page content displayed within the id="ajaxList" after clicking the pagination link

JQuery

$(".page-link").click(function (e) { 
    e.preventDefault(); 

    var url = $(this).attr("data-href"); 

    $("body #ajaxList").load(url + "#ajaxList"); 

}) 

Console Alarm:

[Deprecation] Synchrone XMLHttpRequest auf dem Hauptthread ist veraltet wegen seiner schädlichen Auswirkungen auf die Erfahrung des Endbenutzers. Weitere Informationen finden Sie unter https://xhr.spec.whatwg.org/.

Ich habe versucht, in mehrere Möglichkeiten, die Eltern-Sequenz zu informieren, aber es funktioniert nicht, es funktioniert nur, wenn sie direkt im 'body' zeigt, ohne etwas id oder class

$("#ajaxList") 

$("body #ajaxList") 

$("body .col #ajaxList") 

$("html body .col #ajaxList") 

Angabe Ich bin mit jquery-3.2.1

class.crud.php

public function paging($query,$records_per_page) 
    { 
     $starting_position=0; 
     if(isset($_GET["page_no"])) 
     { 
      $starting_position=($_GET["page_no"]-1)*$records_per_page; 
     } 
     $query2=$query." limit $starting_position,$records_per_page"; 
     return $query2; 
    } 

    public function paginglink($query,$records_per_page) 
    { 
     $self = $_SERVER['PHP_SELF']; 

     $stmt = $this->db->prepare($query); 
     $stmt->execute(); 

     $total_no_of_records = $stmt->rowCount(); 

     if($total_no_of_records > 0) 
     { 
      ?><ul class="pagination"><?php 
      $total_no_of_pages=ceil($total_no_of_records/$records_per_page); 

      $current_page=1; 

      if(isset($_GET["page_no"])) 
      { 
       $current_page=$_GET["page_no"]; 
      } 
      if($current_page!=1) 
      { 
       $previous =$current_page-1; 
       echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=1'>First</a></li>"; 
       echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$previous."'>Previous</a></li>"; 
      } 
      for($i=1;$i<=$total_no_of_pages;$i++) 
      { 
       if($i==$current_page) 
       { 
        echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$i."' style='color:red;'>".$i."</a></li>"; 
       } 
       else 
       { 
        echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$i."'>".$i."</a></li>"; 
       } 
      } 
      if($current_page!=$total_no_of_pages) 
      { 
       $next=$current_page+1; 
       echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$next."'>Next</a></li>"; 
       echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$total_no_of_pages."'>Last</a></li>"; 
      } 
      ?></ul><?php 
     } 
    } 

index.php

<table class="table table-hover" id="ajaxList"> 
       <thead> 
       <tr> 
        <th >#</th> 
        <th style="display:none">id</th> 
        <th>Name</th> 
        <th>Email</th> 
        <th>Tel</th> 
        <th>City</th> 
        <th>Contry</th> 

       </tr> 
       </thead> 
       <tbody > 

       <?php 
        $query = "SELECT * FROM crud ORDER BY id DESC";  
        $records_per_page=7; 
        $newquery = $crud->paging($query,$records_per_page); 
        $crud->dataview($newquery); 
       ?> 
       <tr> 
        <td colspan="7" align="center"> 
         <nav aria-label="Page navigation example"> 
         <?php $crud->paginglink($query,$records_per_page); ?> 
         </nav> 
        </td> 
       </tr> 
       </tbody> 
     </table> 

Answer 1

Es muss ein Leerzeichen nach der Zielseite URI sein, also statt:

url + "#ajaxList" 

Verwendung dieses:

url + " #ajaxList" 

Wenn ein oder mehr Leerzeichen sind in der Zeichenkette enthalten, der Teil der Zeichenkette nach dem ersten Leerzeichen wird alsangenommenjQuery-Selektor, der den zu ladenden Inhalt bestimmt.

Wie in docs gefunden.

Sobald Sie den Anker .page_link entfernen, müssen Sie das Klickereignis erneut binden. Um dies zu vermeiden, binden Sie einfach auf diese Weise an den Körper:

$("body").on("click", ".page-link", function() { ... });