正しくタグ内の表示 - 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/を確認してください。それは私がjquery-3.2.1

を使用していますいくつかの idまたは class

$("#ajaxList") 

$("body #ajaxList") 

$("body .col #ajaxList") 

$("html body .col #ajaxList") 

を指定せずに'body'に直接表示される場合

私は両親のシーケンスを通知するいくつかの方法で試みたが、それは動作しません、それだけで動作します

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アンカーを削除すると、再度clickイベントをバインドする必要があります。これを避けるには、単純に本文にこの方法でバインドします。

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