Problem with bootstrap pagination and search

See more:

PHP

MySQL

bootstrap

Hi!

I'm creating a small project using Php, Bootstrap and MySQL. When I display the data by clicking it's menu Bootstrap pagination and search is working fine, but when I try to add new data pagination and search is not working. My script calling the bootstrap table plugins is included to my fetch script but I can't figure out why is not working. Any idea on how to solve this problem? Thank you in advance.

What I have tried:

//PHP FETCH DATA

<?php 

include_once('../connection/pdo_db_connection.php');

$database = new Connection();
$db = $database->open();

	try {
		$data = $db->query("SELECT sid, asset_tag, particulars, status, user FROM sys_stocks WHERE status='AVAILABLE' ORDER BY asset_tag ASC")->fetchAll();
	foreach ($data as $row) {
	?>

    <tr>
	    <td><?php echo $row['asset_tag']; ?></td>
	    <td><?php echo $row['particulars']; ?></td>
		<td><?php echo $row['status']; ?></td>
		<td><?php echo $row['user']; ?></td>
	    <td>
			<button class="EditStocks" data-sid="<?php echo $row['sid']; ?>">class="fas fa-edit" id="ebutton"></button>
	    	<button class="deletestocks" data-sid="<?php echo $row['sid']; ?>">class="fas fa-trash" id="dbutton"></button>
		</td>				
	</tr>
	<?php
	}
}
	catch(PDOException $e) {
	echo "There's a problem with the connection: " . $e->getMessage();
	}
	    //close connection
		$database->close();
?>

//AJAX ADD DATA

	$('#AddStocks').click(function(){
		$('#AddStocksModal').modal('show');
	});
	$('#addFormstocks').submit(function(e){
		e.preventDefault();
		var addform = $(this).serialize();
		//console.log(addform);
		$.ajax({
			method: 'POST',
			url: 'functions/add_stocks_submit.php',
			data: addform,
			dataType: 'json',
			success: function(response){
				$('#AddStocksModal').modal('hide');
				$(this).find('form').trigger('reset');
				if(response.error){
					$('#alert').show();
					$('#alert_message').html(response.message);
				}
				else{
					$('#alert').show();
					$('#alert_message').html(response.message);
					fetch();
				}
			}
		});
	});
	//

//FETCH DATA TO DISPLAY

function fetch(){
	$.ajax({
		method: 'POST',
		url: 'functions/stocks_fetch.php',
		success: function(response){
			$('#tblbody').html(response);

			//SCRIPT CALLING BOOTSTRAP PLUGINS
               $(document).ready(function() {
                $('#dataTable').DataTable();
               });    
            //
		   }
	     });
       }

//TABLE

<pre> <div class="card shadow mb-4">
   <div class="card-header py-3">
     <center><h6 class="m-0 font-weight-bold text-primary">LIST OF STOCKS</h6> 
     </center>
   </div>
<div class="card-body">
  <div class="table-responsive">
    <table class="table table-bordered" id="dataTable" width="100%"    
      cellspacing="0">
                  <thead>
                    <tr>
                      <th>ASSET TAGS</th>
                      <th>PARTICULARS</th>
                      <th>STATUS</th>
                      <th>PREVIOUS USER</th>
                      <th>OPTION</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                      <th>ASSET TAGS</th>
                      <th>PARTICULARS</th>
                      <th>STATUS</th>
                      <th>PREVIOUS USER</th>
                      <th>OPTION</th>
                    </tr>
                  </tfoot>
                  <tbody id="tblbody"></tbody>
                </table>
              </div>
            </div>
          </div>