Display inside tag correctly - Jquery

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>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.