正確顯示 - jQuery的

Question

當我點擊分頁鏈接的所有工作正常，但唯一的問題是，在div裏面id="ajaxList"再次顯示頁面

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"); 

}) 

控制檯的警報：

[棄用]主線程上的同步XMLHttpRequest爲 已棄用，因爲它對最終用戶的經驗有不利影響。如需更多幫助，請查詢https://xhr.spec.whatwg.org/。

我試圖以多種方式通知家長序列，但它不能正常工作，它只是工作，如果它直接顯示在'body'不指定一些id或class

$("#ajaxList") 

$("body #ajaxList") 

$("body .col #ajaxList") 

$("html body .col #ajaxList") 

我使用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

必須有目標頁URI後面輸入一個空格，所以不是：

url + "#ajaxList" 

使用本：

url + " #ajaxList" 

如果一個或多個空格字符包含在字符串中，第一個空格後面的字符串的 部分假定爲 確定要加載的內容的jQuery選擇器。

如在docs中發現的那樣。

此外，一旦您刪除了.page_link定位點，您將不得不再次綁定點擊事件。爲了避免這種情況，只需以這種方式綁定到身體：

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