0

Estoy insertando datos en una tabla con datatable, al momento de usar el filtro este filtra, pero borra los datos que ya estaban cargados en la tabla.

<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-2" data-widget-editbutton="false">

                <header>
                  <span class="widget-icon"> <i class="fa fa-table"></i> </span>


                </header>

                <!-- widget div-->
                <div>

                  <!-- widget edit box -->
                  <div class="jarviswidget-editbox">
                    <!-- This area used as dropdown edit box -->

                  </div>
                  <!-- end widget edit box -->

                  <!-- widget content -->
                  <div class="widget-body no-padding">

                    <table id="tabla" class="table table-striped table-bordered table-hove tabla_ot" width="100%">
                      <thead>
                        <tr>
                          <th>Dato1</th>
                          <th>Dato2</th>
                          <th>Dato3</th>
                          <th>Dato4</th>
                          <th>Dato5</th>
                          <th>Dato6</th>
                          <th>Dato7</th>
                          <th>Dato8</th>
                          <th>Dato9</th>
                          <th>Dato10</th>
                          <th>Dato11</th>
                          <th>Dato11</th>
                        </tr>
                      </thead>
                      <tbody>
                       <!-- los datos se cargan aca , pero al usar el filtro de datatable se borran-->
                      </tbody>
                    </table>

                  </div>
                  <!-- end widget content -->

                </div>
                <!-- end widget div -->

              </div>
<!-- agrego el filtro y el paginado-->
$( document ).ready(function() {
   $('#tabla').DataTable( {
    scrollY: 300,
    paging: true
} );


 <!-- inserto los datos al tbody con jquery-->
 $.each(obj.lista, function (ind, elem) { 

    $('#tabla > tbody').html('<tr id="token()" class="row_ot" onclick="Redirec('+elem.valor1+')"><td>'+elem.valor2+'</td><td>'+elem.valor3+'</td><td>'+elem.valor4+'</td><td>'+elem.valor5+'</td><td>'+elem.valor6+'</td><td>'+elem.valor7+'</td><td>'+elem.valor8+'</td><td>'+elem.valor9+'</td><td>'+elem.valor10+'</td><td>'+elem.valor11+'</td><td>'+elem.valor12+'</td><td>'+elem.valor13+'</td></tr>');     
    });

Los datos se cargan al comienzo al momento de buscar aunque encuentre coincidencia borra los datos del tbody, se me ocurre que quizás hay una función de datable que cancela ese comportamiento

introducir la descripción de la imagen aquí

9
  • ¿Qué haces primero llamas al plugin $(...).Datatables({...}) o insertas la informacion en la tabla?
    – JuankGlezz
    Commented el 31 may. 2017 a las 17:46
  • primero llamo al plugin Commented el 31 may. 2017 a las 19:13
  • intenta primero cargar los datos en la tabla y después llamas al plugin, ¿Te sucede lo mismo?
    – JuankGlezz
    Commented el 31 may. 2017 a las 19:16
  • sucede exactamente lo mismo estimado :c Commented el 31 may. 2017 a las 19:20
  • el .each() de donde lo obtienes? es una solicitud ajax?
    – JuankGlezz
    Commented el 31 may. 2017 a las 19:29

2 respuestas 2

0

DataTables guarda internamente los datos para sus propósitos.

Te recomiendo hacer esto antes de editar la tabla, agregando filas de la manera que lo haces.

 $('#tabla').DataTable().clear().destroy();

Lo que hace que el contenido de tu tabla se elimine y DataTable remueva todo dato interno que tenga sobre tu tabla.

Luego insertás con tu bucle los nuevos tr, y entonces reinicializás DataTable


 $('#tabla').DataTable({
    scrollY: 300,
    paging: true
}); 

Esto soluciona tu problema.

-1

Necesitas destruir los datos cargados en la tabla, cuando se renderiza la tabla tiene cargado las posiciones y los elementos y al agregarlo así no mantiene esos datos

$('#tabla').dataTable().fnDestroy();

luego has el insert y cargalo (has una función donde tengas tu tabla y sólo lo llamas para levantarlo)

const table = cargarTabla();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.