2

$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "550px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        searching:      false,        
        bPaginate: false,
        bSort: false,
        bInfo: false,
				
    } );
    
} );

 $(document).ready(function(){

        $('.details-control').on('click',function(){
            //odd shown header
            //console.log($(this).parent().attr('class'));
            //if($(this).parent().attr('class') == 'odd header')
            if( ($(this).parent().attr('class') == 'cadena even')  || ($(this).parent().attr('class') == 'cadena odd')  ) 
                $(this).parent().addClass( "shown" );
            else
                $(this).parent().removeClass( "shown" );
            $(this).closest("tr").nextUntil( 'tr[id^="row_"]', 'tr[id^="hijos_"]').slideToggle(10);
        });     
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap.min.css">
    
    th, td { white-space: nowrap; }
    div.dataTables_wrapper {
        width: 100%;
        margin: 0 auto;
    }

    td{
        /*font-size:12px !important;*/
        white-space: nowrap;
    }

    th{
        /*position: fixed;*/
        /*font-size:12px !important;*/
        white-space: nowrap;
        text-align: center !important;     
        border-style: hidden;
        background-color: #F4F4F9 !important; 
    }
    .par{
        background-color: #f39c1226 !important;
    }

    .impar{
        background-color: #3c8dbc21 !important;
    }

    .canal{
        background-color: #fdc060 !important;
    }
    .cadena{
        background-color: #8dc6e6 !important;
    }

    .color_rojo{
        color: #dd4b39;
    }
    td.details-control {
        background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
        cursor: pointer;
    }
    tr.shown td.details-control {
        background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
    }
       
                    <div id="div_listado">
                <!-- /.box-header -->
                <div id="body_table">
                    <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                        <div>
                            <div class="table-responsive">
                                <div id="example_wrapper" class="dataTables_wrapper no-footer"><div class="dataTables_scroll"><div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px none; width: 100%;"><div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1183px; padding-right: 21px;"><table class="display dataTable no-footer" style="width: 1183px; margin-left: 0px;" role="grid"><thead>
                                        <tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 80px;">Canal</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 103px;">Cadena</th><th rowspan="1" colspan="1" style="width: 530px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;" class="">Tienda</th><th class="par sorting_disabled" rowspan="1" colspan="1" style="width: 116px;">Venta 2019 $</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 116px;">Venta 2018 $ </th><th class="par sorting_disabled" rowspan="1" colspan="1" style="width: 73px;">VAR %</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 116px;">PPTO 2019 $</th><th class="par sorting_disabled" rowspan="1" colspan="1" style="width: 56px;">VAR %</th></tr>
                                    </thead></table></div></div><div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%; max-height: 550px;">
                                    <table id="example" class="display dataTable no-footer" style="width: 100%;" role="grid"><thead>
                                        <tr role="row" style="height: 0px;"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 80px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Canal</div></th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 103px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Cadena</div></th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 236px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Tienda</div></th><th class="par sorting_disabled" rowspan="1" colspan="1" style="width: 116px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Venta 2019 $</div></th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 116px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Venta 2018 $ </div></th><th class="par sorting_disabled" rowspan="1" colspan="1" style="width: 73px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height: 0px; overflow: hidden;">VAR %</div></th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 116px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height: 0px; overflow: hidden;">PPTO 2019 $</div></th><th class="par sorting_disabled" rowspan="1" colspan="1" style="width: 56px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height: 0px; overflow: hidden;">VAR %</div></th></tr>
                                    </thead>
                                    
                                    <tbody>
                                 <tr class="canal odd" id="row_0_0" title="Canal: ECOMMERCE" role="row"> 
                                                            <td>ECOMMERCE</td>
                                                            <td></td>
                                                            <td></td>
                                                                                                                        <td class="par"> $ 26.908.870 </td> 
                                                            <td class="impar"> $ 11.725.913 </td>  
                                                            <td class="par ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>  0,00%</td> 
                                                            <td class="impar"> $ 15.055.099 </td>     
                                                            <td class="par ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>  0,00%</td> 
                                                        </tr><tr class="cadena even shown" id="row_0_66" title="Canal: ECOMMERCE Cadena: BADAMAX WEB" role="row"> 
                                                            <td class="details-control" style="border-right: 0px"></td>
                                                            <td>BADAMAX WEB</td>
                                                            <td></td>
                                                                                                                        <td class="par"> $ 23.413.788 </td> 
                                                            <td class="impar"> $ 11.725.913 </td>  
                                                            <td class="par "> <span class="glyphicon glyphicon-triangle-top up"></span>
                                                                 99,68%</td> 
                                                            <td class="impar"> $ 15.055.099 </td>     
                                                            <td class="par "> <span class="glyphicon glyphicon-triangle-top up"></span>
                                                                 55,52%</td> 
                                                        </tr><tr id="hijos_0" style="" title="Canal: ECOMMERCE Cadena: BADAMAX WEB Almacen: FE170 - Venta Internet" role="row" class="odd">
                                                <td></td>
                                                <td></td>
                                                <td>FE170 - Venta Internet</td>
                                                <td class="par"> 
                                                $ 18.912.785</td>
                                                <td class="impar"> 
                                                $ 10.320.962 </td>
                                                <td class="par "> <span class="glyphicon glyphicon-triangle-top up"></span>
                                                                                                83,25%</td>
                                                <td class="impar">                                                
                                                $ 15.055.099</td>
                                                <td class="par "> <span class="glyphicon glyphicon-triangle-top up"></span>
                                                                                                26%</td>
                                            </tr><tr id="hijos_1" style="" title="Canal: ECOMMERCE Cadena: BADAMAX WEB Almacen: NM270 - Venta Internet" role="row" class="even">
                                                <td></td>
                                                <td></td>
                                                <td>NM270 - Venta Internet</td>
                                                <td class="par"> 
                                                $ 4.501.003</td>
                                                <td class="impar"> 
                                                $ 1.404.951 </td>
                                                <td class="par "> <span class="glyphicon glyphicon-triangle-top up"></span>
                                                                                                220,37%</td>
                                                <td class="impar">                                                
                                                $ 0</td>
                                                <td class="par ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 0%</td>
                                            </tr><tr class="cadena odd shown" id="row_1_102" title="Canal: ECOMMERCE Cadena: DAFITI WEB" role="row"> 
                                                            <td class="details-control" style="border-right: 0px"></td>
                                                            <td>DAFITI WEB</td>
                                                            <td></td>
                                                                                                                        <td class="par"> $ 3.495.082 </td> 
                                                            <td class="impar"> $ 0 </td>  
                                                            <td class="par ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>  0,00%</td> 
                                                            <td class="impar"> $ 0 </td>     
                                                            <td class="par ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>  0,00%</td> 
                                                        </tr><tr id="hijos_2" style="" title="Canal: ECOMMERCE Cadena: DAFITI WEB Almacen: FE171 - Venta Internet Dafitti" role="row" class="even">
                                                <td></td>
                                                <td></td>
                                                <td>FE171 - Venta Internet Dafitti</td>
                                                <td class="par"> 
                                                $ 2.570.722</td>
                                                <td class="impar"> 
                                                $ 0 </td>
                                                <td class="par ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 0,00%</td>
                                                <td class="impar">                                                
                                                $ 0</td>
                                                <td class="par ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 0%</td>
                                            </tr><tr id="hijos_3" style="" title="Canal: ECOMMERCE Cadena: DAFITI WEB Almacen: NM271 - Venta Internet Dafitti" role="row" class="odd">
                                                <td></td>
                                                <td></td>
                                                <td>NM271 - Venta Internet Dafitti</td>
                                                <td class="par"> 
                                                $ 924.360</td>
                                                <td class="impar"> 
                                                $ 0 </td>
                                                <td class="par ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 0,00%</td>
                                                <td class="impar">                                                
                                                $ 0</td>
                                                <td class="par ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 0%</td>
                                            </tr><tr class="canal even" id="row_2_2" title="Canal: RETAIL" role="row"> 
                                                            <td>RETAIL</td>
                                                            <td></td>
                                                            <td></td>
                                                                                                                        <td class="par"> $ 912.929.404 </td> 
                                                            <td class="impar"> $ 1.255.566.506 </td>  
                                                            <td class="par ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>  0,00%</td> 
                                                            <td class="impar"> $ 1.381.734.438 </td>     
                                                            <td class="par ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>  0,00%</td> 
                                                        </tr><tr class="cadena odd" id="row_2_23" title="Canal: RETAIL Cadena: FEROUCH" role="row"> 
                                                            <td class="details-control" style="border-right: 0px"></td>
                                                            <td>FEROUCH</td>
                                                            <td></td>
                                                                                                                        <td class="par"> $ 647.561.713 </td> 
                                                            <td class="impar"> $ 935.881.813 </td>  
                                                            <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>  -30,81%</td> 
                                                            <td class="impar"> $ 1.026.232.764 </td>     
                                                            <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>  -36,90%</td> 
                                                        </tr><tr id="hijos_4" style="display:none" title="Canal: RETAIL Cadena: FEROUCH Almacen: FE101 - Parque Arauco" role="row" class="even">
                                                <td></td>
                                                <td></td>
                                                <td>FE101 - Parque Arauco</td>
                                                <td class="par"> 
                                                $ 17.303.053</td>
                                                <td class="impar"> 
                                                $ 28.223.686 </td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -38,69%</td>
                                                <td class="impar">                                                
                                                $ 31.520.592</td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -45%</td>
                                            </tr><tr id="hijos_5" style="display:none" title="Canal: RETAIL Cadena: FEROUCH Almacen: FE103 - Panoramico" role="row" class="odd">
                                                <td></td>
                                                <td></td>
                                                <td>FE103 - Panoramico</td>
                                                <td class="par"> 
                                                $ 6.365.216</td>
                                                <td class="impar"> 
                                                $ 14.677.079 </td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -56,63%</td>
                                                <td class="impar">                                                
                                                $ 11.443.921</td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -44%</td>
                                            </tr><tr id="hijos_6" style="display:none" title="Canal: RETAIL Cadena: FEROUCH Almacen: FE104 - Plaza Oeste" role="row" class="even">
                                                <td></td>
                                                <td></td>
                                                <td>FE104 - Plaza Oeste</td>
                                                <td class="par"> 
                                                $ 18.217.568</td>
                                                <td class="impar"> 
                                                $ 25.279.464 </td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -27,94%</td>
                                                <td class="impar">                                                
                                                $ 28.156.603</td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -35%</td>
                                            </tr><tr id="hijos_7" style="display:none" title="Canal: RETAIL Cadena: FEROUCH Almacen: FE105 - Monjitas" role="row" class="odd">
                                                <td></td>
                                                <td></td>
                                                <td>FE105 - Monjitas</td>
                                                <td class="par"> 
                                                $ 17.613.801</td>
                                                <td class="impar"> 
                                                $ 25.615.355 </td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -31,24%</td>
                                                <td class="impar">                                                
                                                $ 26.888.933</td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -34%</td>
                                            </tr><tr id="hijos_8" style="display:none" title="Canal: RETAIL Cadena: FEROUCH Almacen: FE106 - Mall Plaza Los Angeles" role="row" class="even">
                                                <td></td>
                                                <td></td>
                                                <td>FE106 - Mall Plaza Los Angeles</td>
                                                <td class="par"> 
                                                $ 18.711.891</td>
                                                <td class="impar"> 
                                                $ 25.632.543 </td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -27,00%</td>
                                                <td class="impar">                                                
                                                $ 27.958.276</td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -33%</td>
                                            </tr><tr id="hijos_49" style="display:none" title="Canal: RETAIL Cadena: NEWMAN Almacen: NM204 - Mall del Centro Concepcion" role="row" class="even">
                                                <td></td>
                                                <td></td>
                                                <td>NM204 - Mall del Centro Concepcion</td>
                                                <td class="par"> 
                                                $ 7.581.387</td>
                                                <td class="impar"> 
                                                $ 8.608.656 </td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -11,93%</td>
                                                <td class="impar">                                                
                                                $ 8.912.375</td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -15%</td>
                                            </tr><tr id="hijos_50" style="display:none" title="Canal: RETAIL Cadena: NEWMAN Almacen: NM205 - Plaza Oeste" role="row" class="odd">
                                                <td></td>
                                                <td></td>
                                                <td>NM205 - Plaza Oeste</td>
                                                <td class="par"> 
                                                $ 4.859.189</td>
                                                <td class="impar"> 
                                                $ 4.990.325 </td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -2,63%</td>
                                                <td class="impar">                                                
                                                $ 5.220.392</td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -7%</td>
                                            </tr><tr id="hijos_51" style="display:none" title="Canal: RETAIL Cadena: NEWMAN Almacen: NM206 - Mall Parque Arauco" role="row" class="even">
                                                <td></td>
                                                <td></td>
                                                <td>NM206 - Mall Parque Arauco</td>
                                                <td class="par"> 
                                                $ 10.625.385</td>
                                                <td class="impar"> 
                                                $ 11.144.470 </td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -4,66%</td>
                                                <td class="impar">                                                
                                                $ 12.462.162</td>
                                                <td class="par  color_rojo ">  <span class="glyphicon glyphicon-triangle-bottom down"></span>                                                 -15%</td>
                                            </tr></tbody>
                                </table></div></div></div>
                            <div>
                        </div>
                    </div>
                </div>
            </div>
            
    </div>
</div>

Estoy usando datatable en mi proyecto. tengo unos reportes en los cuales las tablas llevan elementos ocultos. Cuando no se despliegan los elementos ocultos la tabla está perfecta, pero al desplegarlos se "distorsiona", es decir: introducir la descripción de la imagen aquí

Imagen con elementos ocultos: AL desplegarlos:

AL desplegarlos: ¿Cómo puedo corregir ésto?

¿Alguien sabe cómo forzar que un td vacio mida solo 1px de ancho y que no crezca mas de ahí? Ya lo intenté con max-width y no funciona, el datatable no lo toma.

Recién he notado que ésto se corrige cuando manipulo en ancho de la ventana de navegador, cuando está al máximo todas las columnas se ven alineadas.

6
  • Hola, eso es debido a que cuando despliegas el vestuario la descripcion de los productos en la captura que has enviado no se aprecia bien, pero deberia haber un producto con una descripcion larga y eso hace que ocupe mas espacio y se corra a la derecha la columna, lo que puedes hacer es limitar con php la longitud de caracteres Commented el 21 feb. 2019 a las 15:45
  • Gracias @Jorge Bowen pero es precisamente lo que no quiero hacer
    – Virginia
    Commented el 21 feb. 2019 a las 15:54
  • por lo que veo, al agregar las columnas nuevas o mejor dicho, al mostrar las columnas ocultas pareces estar agregando 3 nombres de columnas (th) y 4 columnas (td). PD: el tamaño del contenido es irrelevante, las tablas siempre se cuadran, es el contenido el que puede escaparse de las celdas pero las celdas permanecen con el mismo tamaño de toda la columna
    – LPZadkiel
    Commented el 22 feb. 2019 a las 13:31
  • @LPZadkiel No estoy segura de entender lo que has comentado, pero la cantidad de th y td deben coincidir porque si no me daría error de la librería datatable
    – Virginia
    Commented el 22 feb. 2019 a las 15:03
  • con datatables no puedes usar las propiedades colspan y rowspan?porque con esas propiedades no tiene porque coincidir la cantidad de th y td
    – LPZadkiel
    Commented el 22 feb. 2019 a las 15:09

2 respuestas 2

1

Si tienes de pronto un autoWidth: false en el código de javaScript cuando armas la datatable te aconsejo que lo quites ya que el autowidth daña lo que es la tabla y el responsive te aconsejo que pongas mejor un scrollX: true y en el html antes de declarar la tabla pon un un div con la clase table-responsive <div class="table-responsive"> y lo cierras al terminar la tabla

De paso publica tu código para intentarlo por nuestra cuenta.

3
  • Mi código javascript: $(document).ready(function() { var table = $('#example').DataTable( { scrollY: "550px", scrollX: true, scrollCollapse: true, paging: false, searching: false, bPaginate: false, bSort: false, bInfo: false, } ); } );
    – Virginia
    Commented el 21 feb. 2019 a las 15:43
  • Trataré de publicar el código
    – Virginia
    Commented el 21 feb. 2019 a las 15:44
  • 1
    Una de las soluciones que te puedo brindar es quitar todos los white-space: nowrap; que tengas en el codigo tanto javascript como html
    – PANGALLETA
    Commented el 21 feb. 2019 a las 16:05
0

Para Datatables puedes aplicar este código.

    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ 0 ] },
        { "sWidth": "50px", "aTargets": [0,1,2,3,4,5,6,9,11,12,13,14,15] },
        { "sWidth": "80px", "aTargets": [7,8,10] },
    ],
    "bAutoWidth": false,
1
  • Hola @Jeanpierre Rivas Supongo que ésto solo funciona si la tabla se arma con data que viene del json como lo especifica la libreria, con especificaciones de rows y todo el asunto
    – Virginia
    Commented el 28 feb. 2019 a las 18:33

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.