данных исчезает после заполнения данных

Question

У меня есть этот DataTable:

<table class="table table-striped table-bordered table-advance table-hover" id="tabela_1"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

Я хочу, чтобы заполнить таблицу с данными, с помощью AJAX вызова. У меня есть следующий код: AJAX

function SearchResult(){ 

     $.ajax({ 
      url: 'php/search.php, 
      type: 'get', 
      data: $("#form_search").serialize(), 
      dataType: 'json', 
      success: function (data) { 
      if (data.success) { 
       $("#tabela_1 > tbody").html(""); 
       $.each(data, function (index, record) { 
        if ($.isNumeric(index)) { 
        var row = $("<tr />"); 
        $("<td />").text(record.ID).appendTo(row); 
        $("<td />").text(record.name).appendTo(row); 
        row.appendTo('#tabela_1'); 
        } 
       }); 
      } 
      } 
     }); 
    } 

На данный момент я получаю таблицу, заполненную (после вызова функции SearchResult()).

Но, когда я нажимаю столбец таблицы для сортировки этой колонки, все данные исчезают. То же самое происходит, когда я использую поле поиска таблицы. Я попытался использовать fnDraw() и fnUpdate(), но без эффекта.

Answer 1

Не рекомендуется использовать <tr>/<td> узлы для добавления данных в таблицу, вместо этого используйте соответствующие методы API DataTables, например row.add().

JavaScript:

success: function (data) { 
    var table = $("#tabela_1").DataTable(); 

    if (data.success){ 
     table.clear(); 
     $.each(data, function (index, record){ 
     if ($.isNumeric(index)) { 
      table.row.add([record.ID, record.name]); 
     } 
     }); 

     table.draw(); 
    } 
} 

HTML:

<table class="table table-striped table-bordered table-advance table-hover" id="tabela_1"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
     </tr> 
    </thead> 
</table>