Php 引导表分页和搜索是'；当我使用AJAX获取数据时，它不工作

我正在使用PHP、MySQL、Ajax和Bootstrap创建一个小项目。当我使用PHP include和put in in in in table body标记获取数据时，引导表分页和搜索工作正常，但当我使用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();
              });       
        }
    });
}

存货清单
资产标签
详情
地位
前用户
选项
资产标签
详情
地位
前用户
选项
//调用dataTables jQuery插件
$（文档）.ready（函数（）{
$（'#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><?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();
              });       
        }
    });
}

存货清单
资产标签
详情
地位
前用户
选项
资产标签
详情
地位
前用户
选项
//获取要显示的数据
函数fetch（）{
$.ajax({
方法：“POST”，
url:'functions/stocks_fetch.php'，
成功：功能（响应）{
$（'#tbody'）.html（回复）；
}
});
}
/获取要显示的数据
函数fetch（）{
$.ajax({
方法：“POST”，
url:'functions/stocks_fetch.php'，
成功：功能（响应）{
$（'tblbody'）.html（回复）；
$（文档）.ready（函数（）{
$（'#dataTable'）。dataTable（）；
});       
}
});
}

您真的在每个示例中引用了两个不同的元素吗？第一个是指

#dataTable

元素，而第二个是指

#tbody

能否同时显示stocks_fetch.php的代码？您好，谢谢您的回复我已经解决了我的问题，我发现我的错误是我把调用引导程序插件的脚本放在了一个错误的地方，那就是在页面中放置stocks表的地方。我对Ajax代码进行了一些修改，并在成功响应后将脚本放在那里。现在它工作得很好。你真的在每个例子中引用了两个不同的元素吗？第一个是指

#dataTable

元素，而第二个是指

#tbody

能否同时显示stocks_fetch.php的代码？您好，谢谢您的回复我已经解决了我的问题，我发现我的错误是我把调用引导程序插件的脚本放在了一个错误的地方，那就是在页面中放置stocks表的地方。我对Ajax代码进行了一些修改，并在成功响应后将脚本放在那里。现在它工作得很好。