引导分页和搜索问题

Question

我正在使用Php，Bootstrap和MySQL创建一个小项目。当我通过单击菜单菜单中的Bootstrap分页显示数据时，搜索工作正常，但是当我尝试添加新数据分页时，搜索工作却无法正常进行。我的脚本（称为引导表插件）包含在我的提取脚本中，但是我不知道为什么它不起作用。关于如何解决此问题的任何想法？预先谢谢你。

//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>