5

Por ejemplo tengo un datatable de 5 columnas, que se ven todas con la definición de col-lg, pero cuando quiero probar o verla en celular(col-xs), me gustaría se que pudiera ocultar las ultimas tres columnas.

¿Como se podría lograr hacer eso?¿Alguien podría mostrar algún ejemplo?

Por ejemplo tengo el siguiente codigo:

$(document).ready(function() {
  var table = $('#example').DataTable( {
    "scrollY": "200px"
  } );


} );

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th class="hidden-xs">Age</th>
        <th class="hidden-xs">Start date</th>
        <th class="hidden-xs">Salary</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
</tfoot>

<tbody> 
    <tr>
        <td>Vivian Harrell</td>
        <td>Financial Controller</td>
        <td>San Francisco</td>
        <td>62</td>
        <td>2009/02/14</td>
        <td>$452,500</td>
    </tr>
    <tr>
        <td>Timothy Mooney</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>37</td>
        <td>2008/12/11</td>
        <td>$136,200</td>
    </tr>
    <tr>
        <td>Jackson Bradshaw</td>
        <td>Director</td>
        <td>New York</td>
        <td>65</td>
        <td>2008/09/26</td>
        <td>$645,750</td>
    </tr>
    <tr>
        <td>Olivia Liang</td>
        <td>Support Engineer</td>
        <td>Singapore</td>
        <td>64</td>
        <td>2011/02/03</td>
        <td>$234,500</td>
    </tr>
    <tr>
        <td>Bruno Nash</td>
        <td>Software Engineer</td>
        <td>London</td>
        <td>38</td>
        <td>2011/05/03</td>
        <td>$163,500</td>
    </tr>
    <tr>
        <td>Sakura Yamamoto</td>
        <td>Support Engineer</td>
        <td>Tokyo</td>
        <td>37</td>
        <td>2009/08/19</td>
        <td>$139,575</td>
    </tr>
    <tr>
        <td>Thor Walton</td>
        <td>Developer</td>
        <td>New York</td>
        <td>61</td>
        <td>2013/08/11</td>
        <td>$98,540</td>
    </tr>
    <tr>
        <td>Finn Camacho</td>
        <td>Support Engineer</td>
        <td>San Francisco</td>
        <td>47</td>
        <td>2009/07/07</td>
        <td>$87,500</td>
    </tr>
    <tr>
        <td>Serge Baldwin</td>
        <td>Data Coordinator</td>
        <td>Singapore</td>
        <td>64</td>
        <td>2012/04/09</td>
        <td>$138,575</td>
    </tr>
    <tr>
        <td>Zenaida Frank</td>
        <td>Software Engineer</td>
        <td>New York</td>
        <td>63</td>
        <td>2010/01/04</td>
        <td>$125,250</td>
    </tr>
    <tr>
        <td>Zorita Serrano</td>
        <td>Software Engineer</td>
        <td>San Francisco</td>
        <td>56</td>
        <td>2012/06/01</td>
        <td>$115,000</td>
    </tr>
    <tr>
        <td>Jennifer Acosta</td>
        <td>Junior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>43</td>
        <td>2013/02/01</td>
        <td>$75,650</td>
    </tr>
    <tr>
        <td>Cara Stevens</td>
        <td>Sales Assistant</td>
        <td>New York</td>
        <td>46</td>
        <td>2011/12/06</td>
        <td>$145,600</td>
    </tr>
    <tr>
        <td>Hermione Butler</td>
        <td>Regional Director</td>
        <td>London</td>
        <td>47</td>
        <td>2011/03/21</td>
        <td>$356,250</td>
    </tr>
    <tr>
        <td>Lael Greer</td>
        <td>Systems Administrator</td>
        <td>London</td>
        <td>21</td>
        <td>2009/02/27</td>
        <td>$103,500</td>
    </tr>
    <tr>
        <td>Jonas Alexander</td>
        <td>Developer</td>
        <td>San Francisco</td>
        <td>30</td>
        <td>2010/07/14</td>
        <td>$86,500</td>
    </tr>
    <tr>
        <td>Shad Decker</td>
        <td>Regional Director</td>
        <td>Edinburgh</td>
        <td>51</td>
        <td>2008/11/13</td>
        <td>$183,000</td>
    </tr>
    <tr>
        <td>Michael Bruce</td>
        <td>Javascript Developer</td>
        <td>Singapore</td>
        <td>29</td>
        <td>2011/06/27</td>
        <td>$183,000</td>
    </tr>
    <tr>
        <td>Donna Snider</td>
        <td>Customer Support</td>
        <td>New York</td>
        <td>27</td>
        <td>2011/01/25</td>
        <td>$112,000</td>
    </tr>
</tbody>
</table>

Quiero que en pantalla de pc escritorio me muestre todas las columnas de la tabla, pero cuando se achique, o mejor dicho que cuando se muestra para celular(col-xs), oculte las ultimas 3 columnas.

El asunto es que utilizo el class="hidden-xs, en este caso los th dentro del thead de la tabla, pero solo me oculta los encabezado, la idea es que se aplique a toda la columna, sin estar agregando hidden-xs en cada td del tbody que quiera ocultar.

1
  • como quieres ocultarlas? Predefinidamente? Con un boton en la web?
    – lois6b
    Commented el 7 mar. 2017 a las 14:42

4 respuestas 4

3

Puedes probar esta función, donde si la resolucion de pantalla es menor al valor dato que oculte la columna 4,5,6

$(document).ready(function(){ var mq = window.matchMedia( "(max-width: 500px)" ); // Si la medida es de 0 a 500 hace lo siguiente if (mq.matches) { $('#example>thead>tr>th:nth-of-type(4)').HiddenTables(); $('#example>thead>tr>th:nth-of-type(5)').HiddenTables(); $('#example>thead>tr>th:nth-of-type(6)').HiddenTables(); $('#example>tfoot>tr>th:nth-of-type(4)').HiddenTables(); $('#example>tfoot>tr>th:nth-of-type(5)').HiddenTables();
$('#example>tfoot>tr>th:nth-of-type(6)').HiddenTables(); $('#example>tbody>tr>td:nth-of-type(4)').HiddenTables(); $('#example>tbody>tr>td:nth-of-type(5)').HiddenTables(); $('#example>tbody>tr>td:nth-of-type(6)').HiddenTables(); } jQuery.fn.HiddenTables = function() //damos nombre ala funcion { $(this).hide(); };

});

3

Encontre la solución, en el mismo datatable defino en el document ready, debo colocar algo asi:

 var tabla = $("#example").DataTable({
             "columns": [
                null,
                null,
                null,
                { "className": "hidden-xs" },
                { "className": "hidden-xs" },
                { "className": "hidden-xs" }
            ]
});
3

Puedes echar un vistazo a las Responsives utilities de bootstrap.

Bootstrap responsive utilities

Igual me gustaria saber un poco de tu código para ver si te podemos ayudar más.

EDITO

teniendo todos los datos podemos hacer una función que nos ayude a hacer lo que pides. usando tu tabla como ejemplo.Usa funcion de jQuery, find y usa el filtro eq y el numero de las columnas que quieres ocultar.

  $(document).ready(function() {
  var table = $('#example').DataTable( {
    "scrollY": "200px"
  } );
     $("#table tr").find('td:eq(3)').each(function () {
       $(this).addClass("hidden-xs");
     });
     $("#table tr").find('td:eq(4)').each(function () {
       $(this).addClass("hidden-xs");
     });
     $("#table tr").find('td:eq(5)').each(function () {
       $(this).addClass("hidden-xs");
     });
} );

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th class="hidden-xs">Age</th>
        <th class="hidden-xs">Start date</th>
        <th class="hidden-xs">Salary</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
</tfoot>

<tbody> 
    <tr>
        <td>Vivian Harrell</td>
        <td>Financial Controller</td>
        <td>San Francisco</td>
        <td>62</td>
        <td>2009/02/14</td>
        <td>$452,500</td>
    </tr>
    <tr>
        <td>Timothy Mooney</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>37</td>
        <td>2008/12/11</td>
        <td>$136,200</td>
    </tr>
    <tr>
        <td>Jackson Bradshaw</td>
        <td>Director</td>
        <td>New York</td>
        <td>65</td>
        <td>2008/09/26</td>
        <td>$645,750</td>
    </tr>
    <tr>
        <td>Olivia Liang</td>
        <td>Support Engineer</td>
        <td>Singapore</td>
        <td>64</td>
        <td>2011/02/03</td>
        <td>$234,500</td>
    </tr>
    <tr>
        <td>Bruno Nash</td>
        <td>Software Engineer</td>
        <td>London</td>
        <td>38</td>
        <td>2011/05/03</td>
        <td>$163,500</td>
    </tr>
    <tr>
        <td>Sakura Yamamoto</td>
        <td>Support Engineer</td>
        <td>Tokyo</td>
        <td>37</td>
        <td>2009/08/19</td>
        <td>$139,575</td>
    </tr>
    <tr>
        <td>Thor Walton</td>
        <td>Developer</td>
        <td>New York</td>
        <td>61</td>
        <td>2013/08/11</td>
        <td>$98,540</td>
    </tr>
    <tr>
        <td>Finn Camacho</td>
        <td>Support Engineer</td>
        <td>San Francisco</td>
        <td>47</td>
        <td>2009/07/07</td>
        <td>$87,500</td>
    </tr>
    <tr>
        <td>Serge Baldwin</td>
        <td>Data Coordinator</td>
        <td>Singapore</td>
        <td>64</td>
        <td>2012/04/09</td>
        <td>$138,575</td>
    </tr>
    <tr>
        <td>Zenaida Frank</td>
        <td>Software Engineer</td>
        <td>New York</td>
        <td>63</td>
        <td>2010/01/04</td>
        <td>$125,250</td>
    </tr>
    <tr>
        <td>Zorita Serrano</td>
        <td>Software Engineer</td>
        <td>San Francisco</td>
        <td>56</td>
        <td>2012/06/01</td>
        <td>$115,000</td>
    </tr>
    <tr>
        <td>Jennifer Acosta</td>
        <td>Junior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>43</td>
        <td>2013/02/01</td>
        <td>$75,650</td>
    </tr>
    <tr>
        <td>Cara Stevens</td>
        <td>Sales Assistant</td>
        <td>New York</td>
        <td>46</td>
        <td>2011/12/06</td>
        <td>$145,600</td>
    </tr>
    <tr>
        <td>Hermione Butler</td>
        <td>Regional Director</td>
        <td>London</td>
        <td>47</td>
        <td>2011/03/21</td>
        <td>$356,250</td>
    </tr>
    <tr>
        <td>Lael Greer</td>
        <td>Systems Administrator</td>
        <td>London</td>
        <td>21</td>
        <td>2009/02/27</td>
        <td>$103,500</td>
    </tr>
    <tr>
        <td>Jonas Alexander</td>
        <td>Developer</td>
        <td>San Francisco</td>
        <td>30</td>
        <td>2010/07/14</td>
        <td>$86,500</td>
    </tr>
    <tr>
        <td>Shad Decker</td>
        <td>Regional Director</td>
        <td>Edinburgh</td>
        <td>51</td>
        <td>2008/11/13</td>
        <td>$183,000</td>
    </tr>
    <tr>
        <td>Michael Bruce</td>
        <td>Javascript Developer</td>
        <td>Singapore</td>
        <td>29</td>
        <td>2011/06/27</td>
        <td>$183,000</td>
    </tr>
    <tr>
        <td>Donna Snider</td>
        <td>Customer Support</td>
        <td>New York</td>
        <td>27</td>
        <td>2011/01/25</td>
        <td>$112,000</td>
    </tr>
</tbody>
</table>
12
  • 2
    Esto es solo un enlace y en su totalidad parece un comentario. Intenta hacer respuestas mas elaboradas. Un saludo
    – lois6b
    Commented el 7 mar. 2017 a las 14:29
  • tampoco me ayuda mucho la pregunta, por eso he pedido que haya mas información del problema.
    – Luis
    Commented el 7 mar. 2017 a las 14:36
  • pero eso no se pide en una respuesta. Porque las respuestas respnonden a la pregunta, no plantean otras preguntas. para eso estan los comentarios.
    – lois6b
    Commented el 7 mar. 2017 a las 14:37
  • por eso agregue el link , pues plantea una solución a la pregunta.
    – Luis
    Commented el 7 mar. 2017 a las 14:39
  • Entonces es una respuesta de baja calidad. un enlace no es una respuesta deseada. En SOes no solo se busca el solucionar el problema si no recoger preguntas y respuestas de calidad. por eso se cierran preguntas y no se dejan responder.
    – lois6b
    Commented el 7 mar. 2017 a las 14:40
2

Para ocultar las ultimas 3 columnas de 5, debes colocarlo de esta manera:

$( "#btnOcultar" ).on( "click", function() {
            $('#tabla').DataTable().destroy();
            $('#tabla').DataTable( {
                "pagingType": "full_numbers",
                "columnDefs": [
                    {
                        "targets": [ 2 ],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [ 3 ],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [ 4 ],
                        "visible": false,
                        "searchable": false
                    }
                ]
            } );
        } );

Primero, destruyes el Datatable asignado al principio, si es que lo agregaste al table al momento de cargar la página, luego le asignas nuevamente el Datatable con las columnas que quieras ocultar.

Puedes manejarlo con botones, o con eventos que suceden en tu página, yo tengo dos botones, uno para ocultar y otro para mostrar. Para mostrarlo nuevamente, lo único que debes hacer es cambiar false por true, tanto en el atributo visible, como en searchable.

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.