bootstrap4 dataTables поиск Опция не работает

Question

Я использую 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/

Пожалуйста, помогите мне выяснить, почему поиск не работает ....

Answer 1

Вы добавляете свои данные в tbody ($('#tb_product_details tbody').append(trHTML);), когда в вашей таблице фактически не установлено значение tbody, попробуйте добавить тег tbody вручную и посмотрите, исправляет ли это вашу проблему, также попробуйте добавить class="display" на ваш table тег, как показано здесь: https://datatables.net/manual/installation

ОБНОВЛЕНИЕ: вы также заполняете свою таблицу после того, как вызываете плагин DataTable, что бесполезно, так как плагину необходимо установить правильную таблицу перед загрузкой, посмотрите эту скрипку, которую я сделал с таблицей демо, приведенное в документации, которая отлично работает: https://jsfiddle.net/zn7gv3ux/

Я думаю, что вы должны вызывать DataTable в вашем успешном обратном вызове после того, как вы заполнили данные из вашего ajax-запроса, таким образом вы будете уверены, что ваша таблица готова для обработки плагином.

Так сделай так:

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

Фрагмент из jsfiddle от GrafiCode Studio, * * который тестировал мое решение:

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