0

alguien sabe como puedo ocultar un data-table logre ocultar la tabla pero las propiedades del data-table se siguen quedando no se ocultan.

y como podría ocultar y mostrar con un solo botón alguna idea ?

aquí mi cogido con el que ejecuto el data-table:

$(document).ready( function () {
    $('#exportar').DataTable();
} );

aquí mi código con el que oculto la tabla:

$(document).ready(function(){
    $("#mostrar").on( "click", function() {
      $('#exportar').show(); //muestro mediante id
     });
    $("#ocultar").on( "click", function() {
      $('#exportar').hide(); //oculto mediante id    
    });
  });

aquí esta mi tabla: introducir la descripción de la imagen aquí

aquí ya oculte la tabla pero las propiedades del data-table siguen ahí: introducir la descripción de la imagen aquí

1 respuesta 1

1

$( ()=> {

  $('#table').DataTable();


  $(document).on('click', '#btn', function(){

  if( !$('.dataWrapper').is(':visible') ) {
    $('.dataWrapper').show();
  } else {
    $('.dataWrapper').hide();
  }


  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<div class="dataWrapper">
<table id="table">
  <thead>
    <tr>
      <th>Campo 1</th>
      <th>Campo 2</th>
    </tr>
  </thead>
</table>
</div>
<button id="btn">Ocultar/Mostrar</button>

Debes de envolver esa tabla en otro elemento para que se oculte, por ejemplo un div debido a que el plugin DataTables genera elementos adicionales para que funcione.

Te dejo un ejemplo de como se comportaría

Como recomendación, anexe un if para validar si la tabla está visible o no y poder hacer un toggle correcto

3
  • muchas gracias era justo lo que necesitaba , solo para entender mejor tu código me quedo una duda al inicio que significa esto: $( ()=> { Commented el 21 may. 2019 a las 21:18
  • Es la reducción de $(document).ready() Commented el 21 may. 2019 a las 21:31
  • aa ok perfecto no lo había utilizado de esa forma , muchas gracias Commented el 21 may. 2019 a las 21:35

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.