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: $( ()=> { el 21 may. 2019 a las 21:18
  • Es la reducción de $(document).ready() el 21 may. 2019 a las 21:31
  • aa ok perfecto no lo había utilizado de esa forma , muchas gracias el 21 may. 2019 a las 21:35

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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