Display inside tag correctly - Jquery

Question

When I click the pagination links all work correctly, but the only problem is that inside the div id="ajaxList" displays again all the content of the page

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 alert:

[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

$( "#ajaxList" )

$( "body #ajaxList" )

$( "body .col #ajaxList" )

$( "html body .col #ajaxList" )

I am using 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

There must be a space after the target page URI, so instead of:

url + "#ajaxList"

use this:

url + " #ajaxList"

If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

As found in docs .

Also, once you remove the .page_link anchor, than you would have to bind click event once again. To avoid that, simply bind to body this way:

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