Jquery bootstrap4数据表搜索选项不工作

我使用bootstrap4数据表从服务器填充数据。我已成功填充表中的数据。但当我在搜索表中键入值时，表变为空。我不知道为什么会发生这是我的代码

装载时，我使用了以下代码

<script type="text/javascript">
  $(document).ready(function() {        
    $('#tb_product_details').DataTable();           
    getData();
  });
</script>

$（文档）.ready（函数（）{
$（“#tb#U产品#U详细信息”）.DataTable（）；
getData（）；
});

我已经使用下面的代码从服务器填充了数据

function getData() {
    $.ajax({
        type : "POST",
        url : "productDetails/getProductList",

        success : function(data) {              

            var trHTML = '';
            for (var i = 0; i < data.length; i++) {                     
                var item = data[i]; 
                trHTML += '<tr>';
                trHTML += '<td>'+ item.slno + '</td>';
                trHTML += '<td>'+ item.productid + '</td>';
                trHTML += '<td>'+ item.name + '</td>';                  

                trHTML += '</tr>';  
            }
            $('#tb_product_details tbody').append(trHTML);              
        }
    })
}

函数getData（）{ $.ajax({ 类型：“POST”， url:“产品详细信息/getProductList”， 成功：函数（数据）{ var trHTML=''； 对于（var i=0；i

我使用了下面的html表格代码

<table class="table table-bordered" id="tb_product_details" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>SL</th>
            <th>Product ID</th>
            <th>Product Name</th>                       
        </tr>
    </thead>
     <tbody>
      </tbody>
</table>

SL
产品ID
品名

这是datatables js

<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src=" https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

下面是一个显示当前情况的JSFIDLE：

---

请帮助我找出搜索不起作用的原因。…

您将数据附加到

tbody

（

$（“#tb#u product_details tbody”）.append（trHTML）；

）当您的表中实际上没有设置

tbody

时，尝试手动添加

tbody

标记，看看这是否解决了您的问题，还可以尝试将

class=“display”

添加到

表中，如下所示：

更新：调用DataTable plugin后，您也可以填充表格，这是不可能的，因为插件需要在加载之前设置正确的表格，请参阅我使用文档中提供的表格演示制作的这把小提琴，它工作得很好：

我认为您应该在从ajax请求填充数据之后，在成功回调中调用DataTable，这样您就可以确保您的表已准备好由插件处理

那么就这样做吧：

<script type="text/javascript">
  $(document).ready(function() {                 
    getData();
  });
</script>



function getData() {
$.ajax({
    type : "POST",
    url : "productDetails/getProductList",

    success : function(data) {              

        var trHTML = '';
        for (var i = 0; i < data.length; i++) {                     
            var item = data[i]; 
            trHTML += '<tr>';
            trHTML += '<td>'+ item.slno + '</td>';
            trHTML += '<td>'+ item.productid + '</td>';
            trHTML += '<td>'+ item.name + '</td>';                  

            trHTML += '</tr>';  
        }
        $('#tb_product_details tbody').append(trHTML);
        $('#tb_product_details').DataTable(); //call the plugin here after appending datas              
    }
})
}


$（文档）.ready（函数（）{
getData（）；
});
函数getData（）{
$.ajax({
类型：“POST”，
url:“产品详细信息/getProductList”，
成功：函数（数据）{
var trHTML=''；
对于（var i=0；i

GrafiCode Studio的JSFIDLE测试我的解决方案的代码片段：


$（文档）.ready（函数（）{
var trHTML='111222'；
$（'#tb#u产品_详情tbody'）。追加（trHTML）；
$（“#tb#U产品#U详细信息”）.DataTable（）；
});

SL
产品ID
品名
您要在
tbody
（
$（“#tb#tb_产品_详细信息tbody”）.append（trHTML）；
）上追加数据，当表中实际上没有设置
tbody
时，尝试手动添加
tbody
标记，看看这是否解决了您的问题，同时尝试添加
class=“display”
放在
表上
标签上，如下所示：

更新：调用DataTable plugin后，您也可以填充表格，这是不可能的，因为插件需要在加载之前设置正确的表格，请参阅我使用文档中提供的表格演示制作的这把小提琴，它工作得很好：

我认为您应该在从ajax请求填充数据之后，在成功回调中调用DataTable，这样您就可以确保您的表已准备好由插件处理

那么就这样做吧：

<script type="text/javascript">
  $(document).ready(function() {                 
    getData();
  });
</script>



function getData() {
$.ajax({
    type : "POST",
    url : "productDetails/getProductList",

    success : function(data) {              

        var trHTML = '';
        for (var i = 0; i < data.length; i++) {                     
            var item = data[i]; 
            trHTML += '<tr>';
            trHTML += '<td>'+ item.slno + '</td>';
            trHTML += '<td>'+ item.productid + '</td>';
            trHTML += '<td>'+ item.name + '</td>';                  

            trHTML += '</tr>';  
        }
        $('#tb_product_details tbody').append(trHTML);
        $('#tb_product_details').DataTable(); //call the plugin here after appending datas              
    }
})
}


$（文档）.ready（函数（）{
getData（）；
});
函数getData（）{
$.ajax({
类型：“POST”，
url:“产品详细信息/getProductList”，
成功：函数（数据）{
var trHTML=''；
对于（var i=0；i

GrafiCode Studio的JSFIDLE测试我的解决方案的代码片段：


$（文档）.ready（函数（）{
var trHTML='111222'；
$（'#tb#u产品_详情tbody'）。追加（trHTML）；
$（“#tb#U产品#U详细信息”）.DataTable（）；
});

SL
产品ID
品名
未执行getData（）函数anywhere@tcj抱歉，getProductDetails（）是getData（）。我已经编辑过了控制台显示错误了吗？@develenvonate没有，先生，它在中没有显示错误console@EnamulHaque您编写了
$（'#tb#product_details tbody'）。append（trHTML）
但是在您的表中没有
标记您的getData（）函数没有执行anywhere@tcj抱歉，getProductDetails（）是getData（）。我已经编辑过了控制台是否显示任何错误？@develenvonate不，先生，它不显示