bootstrap4 dataTables search Option not working

Question

I am using bootstrap4 dataTables to populate data from server. I have successfully populated data in table. But when I type value in search table, table become empty. I don't know why it is happening here is my code...

1. On load I have used bellow code

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

2. I have populated data from server using bellow code

   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. I have used bellow html table code..

   <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. Here is the 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>
   

Here is a jsfiddle showing the current situation: https://jsfiddle.net/035adhcx/

Please help me to find out why search is not working....

Answer 1

You're appending your data on tbody ($('#tb_product_details tbody').append(trHTML);) when there is actually no tbody set in your table, try adding the tbody tag manually and look if that fixes your issue, also try adding class="display" onto your table tag as shown here : https://datatables.net/manual/installation

UPDATE : you also populate your table after you call DataTable plugin, which is a no go as the plugin needs to have the proper table set before you load it, see this fiddle I made with the table demo provided in the documentation which works fine : https://jsfiddle.net/zn7gv3ux/

I think you should call DataTable in your success callback after you populated the data from your ajax request, that way you will make sure that your table is ready to be processed by the plugin.

So do it like so :

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

Snippet from GrafiCode Studio's jsfiddle who tested my solution :

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