当我使用AJAX提取数据时，Bootstap表的分页和搜索不起作用

Question

我正在使用PHP，MySQL，Ajax和Bootstrap创建一个小项目。当我使用PHP include提取数据并将其放入表主体标签内时，Bootstrap表的分页和搜索工作正常，但是当我使用AJAX提取数据并将其附加到使用ID附加到表主体时，分页和搜索无法正常工作。

引导分页和搜索正在对此代码起作用：

<!-- Table -->
<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><?php include('../functions/stocks_fetch.php'); ?></tbody>
      </table>
    </div>
  </div>
</div>
<!-- End of Table -->

// Call the dataTables jQuery plugin
$(document).ready(function() {
  $('#dataTable').DataTable();
});

并且不使用此代码：

<!-- Table -->
<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="tbody"></tbody>
      </table>
    </div>
  </div>
</div>
<!-- End of Table -->

//FETCH DATA TO DISPLAY
function fetch(){
    $.ajax({
        method: 'POST',
        url: 'functions/stocks_fetch.php',
        success: function(response){
            $('#tbody').html(response);
        }
    });
}

<!-- MY NEW WORKING AJAX CODE -->

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

            $(document).ready(function() {
                $('#dataTable').DataTable();
              });       
        }
    });
}