Как правильно добавить AJAX в DataTable?

Question

Я использую таблицу данных bootstrap и передаю регистры через ajax. Однако, по какой-то причине, так как я начал заполнять таблицу функцией ajax, окно поиска, нумерация страниц и порядок столбцов перестали работать. Сначала он печатает регистры, но если я ищу его, он добавляет строку в начале таблицы, говорящую «регистры не найдены», как будто она пустая. То же самое происходит, когда я пытаюсь переключить, сколько регистров он показывает на странице. (И это вообще не разбивает на страницы)

Вот мой код:

<script type="text/javascript">   
    $(document).ready(function() {
      $('#dom').DataTable({  
        ajax:{
                url: '/restapi/enviarjson/',
                type: 'get',
                success: function (json){
                    $("#dom > tbody").empty()                        
                    var table = [];
                $.each(json, function(key, val){
                    table.push('<tr>');
                    table.push('<td style="vertical-align: middle; text-align: center;">'+ '<input type="checkbox" id="onff2" name="onff2" value="'+val.pk+'">' + '</td>');
                    table.push('<td style="color:#A9A9A9; vertical-align: middle; text-align: center;">'+val.pk+'</td>');                        
                    table.push('<td style="color:#A9A9A9; vertical-align: middle; text-align: center;">'+val.fields.nombre_activo+'</td>');
                    table.push('<td style="color:#A9A9A9; vertical-align: middle; text-align: center;">'+val.fields.desc_act+'</td>');
                    table.push('<td style="color:#A9A9A9; vertical-align: middle; text-align: center;">'+val.fields.dat_cont_arch+'</td>');
                    table.push('<td style="color:#A9A9A9; vertical-align: middle; text-align: center;">'+val.fields.resp_dom+'</td>');
                    table.push('<td style="color:#A9A9A9; vertical-align: middle; text-align: center;">'+val.fields.estado+'</td>');
                    table.push('</tr>');
                });
                $("<tbody/>", {html: table.join("")}).appendTo("table");
                }  
              },
        language: {searchPlaceholder: "Buscar",
                      search: "",
                      "paginate": {
                                    "first": "Primero",
                                    "last": "Ultimo",
                                    "next": "Siguiente",
                                    "previous": "Anterior"
                                  },
                      "zeroRecords": "Sin resultados encontrados",
                      "infoEmpty": "",
                      "emptyTable": "No hay información",
                      "lengthMenu": "Mostrar _MENU_ Registros",
                      "info": "",
                      "infoFiltered": "",
                  } 
      });  
    });  
  </script>

HTML:

    <table id="dom" class="table table-striped table-bordered" style="width:100%;" >
        <thead>
            <tr>
              <th class="header1" style="vertical-align: middle; text-align: center;">  </th>
              <th class="header1" style= "vertical-align: middle; text-align: center;" >ID Dominio de Información</th>
              <th class="header1" style= "vertical-align: middle; text-align: center;">Nombre del dominio de Información</th>
              <th class="header1" style= "vertical-align: middle; text-align: center;">Descripción</th>
              <th class="header1" style= "vertical-align: middle; text-align: center;">Responsable del dominio</th>
              <th class="header1" style= "vertical-align: middle; text-align: center;">Datos contenidos en el dominio</th>
              <th class="header1" style= "vertical-align: middle; text-align: center;">Estado</th>
            </tr>
        </thead>
        <tbody id="res">
        </tbody>
    </table>