时间戳

首页 > 解决方案 > bootstrap4 dataTables 搜索选项不起作用

jquery - bootstrap4 dataTables 搜索选项不起作用

问题描述

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

  1. 在加载时我使用了下面的代码

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

  2. 我已经使用以下代码从服务器填充数据

    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);              
        }
    })
}

  3. 我使用了下面的 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>

  4. 这是数据表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>

这是一个显示当前情况的 jsfiddle：https ://jsfiddle.net/035adhcx/

请帮我找出为什么搜索不起作用....

标签： jquerybootstrap-4

解决方案

当您的表中实际上没有设置时，您将数据附加到tbody( ) 上，尝试手动添加标签并查看是否可以解决您的问题，也尝试添加到您的标签中，如下所示：https ://datatables.net/手动/安装$('#tb_product_details tbody').append(trHTML);tbodytbodyclass="display"table

更新：您还可以在调用 DataTable 插件后填充您的表格，这是不行的，因为插件需要在加载之前设置正确的表格，请参阅我使用文档中提供的表格演示制作的小提琴，效果很好：https://jsfiddle.net/zn7gv3ux/

我认为您应该在从 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              
    }
})
}

来自GrafiCode Studio 的jsfiddle 的片段，他测试了我的解决方案：

$(document).ready(function() {
	var trHTML = '<tr><td>1</td><td>1</td><td>1</td></tr><tr><td>2</td><td>2</td><td>2</td></tr>';
	$('#tb_product_details tbody').append(trHTML);
	$('#tb_product_details').DataTable();

});
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script
			  src="https://code.jquery.com/jquery-3.4.1.min.js"
			  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
			  crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

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

推荐阅读