正确显示 - 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() { ... });