FAZENDO O GRID ABRIR LADO A LADO VIA AJAX COM DATATABLE

Ola pessoal quero fazer com que meu codigo grid ele faz a mesma coisa como a table que roda dentro do ajax datatable

conforme vai digitando vai aparecendo os resultado que estiver no banco de dados

Este código em baixo e do DATATABLE ele funciona perfeitamente do jeito ai

<?php

	/* Connect To Database*/
	require_once ("../conexion.php");

$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
if($action == 'ajax'){
	$query = mysqli_real_escape_string($con,(strip_tags($_REQUEST['query'], ENT_QUOTES)));

	$tables="tblprod";
	$campos="*";
	$sWhere=" tblprod.prod_name LIKE '%".$query."%'";
	$sWhere.=" order by tblprod.prod_name";

	include 'pagination.php'; //include pagination file
	//pagination variables
	$page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1;
	$per_page = intval($_REQUEST['per_page']); //how much records you want to show
	$adjacents = 4; //gap between pages after number of adjacents
	$offset = ($page - 1) * $per_page;
	//Count the total number of row in your table*/
	$count_query = mysqli_query($con,"SELECT count(*) AS numrows FROM $tables where $sWhere ");
	if ($row= mysqli_fetch_array($count_query)){$numrows = $row['numrows'];}
	else {echo mysqli_error($con);}
	$total_pages = ceil($numrows/$per_page);
	//main query to fetch the data
	$query = mysqli_query($con,"SELECT $campos FROM $tables where $sWhere LIMIT $offset,$per_page");
	//loop through fetched data

	if ($numrows>0){

	?>
 <div class="table-responsive">
 <table class="table table-striped table-hover">
 <thead>
 <tr>
 <th class='text-center'>Código</th>
 <th>Produto </th>
 <th>Categoría </th>
 <th class='text-center'>Stock</th>
 <th class='text-right'>Preço</th>
 <th></th>
 </tr>
 </thead>
 <tbody>
 <?php
 $finales=0;
 while($row = mysqli_fetch_array($query)){
 $product_id=$row['id'];
 $prod_code=$row['prod_code'];
 $prod_name=$row['prod_name'];
 $prod_ctry=$row['prod_ctry'];
 $prod_qty=$row['prod_qty'];
 $price=$row['price'];
 $finales++;
 ?>
 <tr class="<?php echo $text_class;?>">
 <td class='text-center'><?php echo $prod_code;?></td>
 <td ><?php echo $prod_name;?></td>
 <td ><?php echo $prod_ctry;?></td>
 <td class='text-center' ><?php echo $prod_qty;?></td>
 <td class='text-right'><?php echo number_format($price,2);?></td>
 <td>
 <a href="#" data-target="#editProductModal" class="edit" data-toggle="modal" data-id="<?php echo $product_id; ?>"><i class="material-icons" data-toggle="tooltip" title="Editar" >&#xE254;</i></a>
 <a href="#deleteProductModal" class="delete" data-toggle="modal" data-id="<?php echo $product_id;?>"><i class="material-icons" data-toggle="tooltip" title="Eliminar">&#xE872;</i></a>
 </td>
 </tr>
 <?php }?>
 <tr>
 <td colspan='6'>
 <?php
 $inicios=$offset+1;
 $finales+=$inicios -1;
 echo "Mostrando $inicios al $finales de $numrows registros";
 echo paginate( $page, $total_pages, $adjacents);
 ?>
 </td>
 </tr>
 </tbody>
 </table>
 </div>

	<?php
	}
}
?>

	Este é o meu GRID que quero que funcione dentro deste AJAX ai

 <section class="lis-grediant grediant-tb-white">
 <div class="container">
 <div class="row">
 <?php
mysqli_set_charset($con,"utf8");
$sql = mysqli_query($con,"select * from tblprod WHERE prod_name order by prod_name DESC LIMIT 15");

while ($dados=mysqli_fetch_array($sql)){

 $prod_id = $dados["prod_id"];
$prod_name = $dados["prod_name"]; $prod_img = $dados["prod_img"];
?>
 <div class="col-12 col-sm-4 col-lg-2 wow fadeInUp mb-4 mb-lg-0 text-center">
 <a href="listing-no-map-fullwidth.html" class="text-white">
 <div class="lis-categories rounded lis-font-poppins py-4"><img src="<?php echo ConfigPainel('site_url'); ?>/loja/images/<?php echo $prod_img; ?>" class="img-responsive" alt="img" width="100%" height="100%">
 <div class="text-white mb-2 h2"></div>
 <font color="#000"><?php echo $prod_name; ?></font>
 </div>
 </a>
 </div>
<?php
}
?>
 </div>
 </div>
 </section>
 <!--End GRID -->

	  Desde já fico grato