Блог

Я создаю небольшой проект, используя PHP, MySQL, Ajax и Bootstrap. Когда я извлекаю данные с помощью PHP include и помещаю во внутренний тег тела таблицы, разбивка на страницы таблицы начальной загрузки и поиск работают нормально, но когда я извлекаю данные с помощью 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();
              });       
        }
    });
}