Empty table everytime that i search?

Zingster

Hello,
I'm trying to fill my dataTable with ajax, but since i added that feature using js, pagination stopped working (it shows all the registers at the same page), also, it adds a row at the beggining of the table saying the table is empty everytime that i search for a register, or change the number of registers per page. The first set of registers remains with no change.
Can you guys help me with that issue please?
Thanks everyone!

Zingster

My code is:

    <script type="text/javascript">   
        $(document).ready(function() {
          $('#dom').DataTable({  
            ajax:{
                   "dataSrc": "",
                    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>




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

kthorngren

The ajax docs state this about using the success function:

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below).

Are you receiving JSON data? If so why are you building the HTMl table in the success function? Datatables can handle building the table with the JSON data. Plus Datatables does not know about any of the data when adding it this way. This is why searching, etc is not working.

Take a look at this Ajax doc to learn how to use Datatables Ajax. Post any questions.

Kevin

Zingster

Hello Kevin.
Thank you very much for your answer.
I changed my code to

        $(document).ready(function() {
          $('#dom').DataTable({  
            ajax:{
                    url: '/restapi/enviarjson/',
                    "dataSrc": "",
                  },
            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": "",
                      } 
          });  
        });  

However, i'm getting the following error: "DataTables warning: table id=dom - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4"
I went to the link but i don't really know how to fix it.
However, the amount of empty rows it is showing matches the amount of registers. And the pagination and everything started working again.

Zingster

I solved the problem by now, thank u!