Проблема с нумерацией страниц и поиском

Question

Я создаю небольшой проект с использованием Php, Bootstrap и MySQL.Когда я отображаю данные, щелкая по его меню, нумерация страниц начальной загрузки и поиск работает нормально, но когда я пытаюсь добавить новые разбиение на страницы данных, поиск не работает.Мой скрипт, вызывающий плагины таблицы начальной загрузки, включен в мой скрипт извлечения, но я не могу понять, почему он не работает.Есть идеи, как решить эту проблему?Заранее спасибо.

//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();
               });    
            //
           }
         });
       }

//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']; ?>"></button>
            <button class="deletestocks" data-sid="<?php echo $row['sid']; ?>"></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>