1

Probando la libreria de DataTables, haciendo pruebas y utilizando las tabs dinámicas de bootstrap, puse una tabla en cada tab dinámica (2) y las inicialize para que fueran DataTables, al realizar esto note que la tabla de la tab activa esta correctamente inicializada, sin embargo la tabla de la tab inactiva tiene los headers como si no tuvieran ancho entre si.

pero al mover la resolución (cambiar el ancho del navegador por ejemplo) de la pantalla esto se arregla y entonces la otra tabla es la que presenta el problema.

Dando click a uno de los headers para que se ordene la tabla, se soluciona en las dos secciones, pero no aparece inicialmente de esta manera y si en ocaciones no utilizo el ordenamiento no se solucionaría dando click en un header

¿Como pudiera lograr que se pongan de forma correcta ambas tablas desde que las inicializo?

aqui anexo el ejemplo para que me entiendan de mejor manera

2
  • Lo que vos queres hacer se puede sin ningún problema, en el ejemplo que subiste si comentas el "scrollX: true" todo funciona correctamente. Habria que analizar mejor porque te pasa eso. Commented el 8 mar. 2018 a las 13:48
  • Pero en el caso el "scrollX: true" lo necesite?
    – Villatoro
    Commented el 8 mar. 2018 a las 15:16

1 respuesta 1

2

El problema es que datatables para calcular el scrollX necesita saber el width de la tabla para luego calcular el width que le va a setear a la div con clase "dataTables_scrollHeadInner" que crea dinamicamente, y como el "tab 2" esta con display:none, no puede calcularlo y le da un valor que no es el correcto.

Por lo tanto una solución seria reajustar el ancho de las columnas de la tabla cuando te posiciones sobre cada uno de los tabs.

Le hice unos pequeños cambios a tu codigo a modo de ejemplo:

1: Le agregue un return a la funcion que crea los datatables, para luego poder acceder a cada una de las tablas:

function iniciarDataTable(id){
    var table = $('#'+id).DataTable({
      //todo el codigo
    });
    table.buttons().container().appendTo( '#example_wrapper .col-md-6:eq(0)');

    return table;
} 

2: Actualizo las columnas según en la cual estoy posicionado:

$(document).ready(function(){
    var tabla1 = iniciarDataTable('example1');
    var tabla2 = iniciarDataTable('example2');

    $('.nav-tabs a').on('shown.bs.tab', function(event){
        var referencia = $(event.target).attr("href"); 
        if(referencia == "#seccion1")
          tabla1.columns.adjust();
        if(referencia == "#seccion2")
          tabla2.columns.adjust();
    });
});

De esta manera cuando accedas a cada tab, estas ajustando las columnas de la tabla que corresponda

Aca tedejo un ejemplo con codigo minimo repitiendo tu problema:

$(document).ready(function(){
  iniciarDataTable('example1');
  iniciarDataTable('example2');
});

function iniciarDataTable(id){
  var table = $('#'+id).DataTable({
     scrollX: true
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<div class="container-fluid">
   <br>
   <div class="row">
     <div class="col-xs-12">
       <div role="tabpanel">

          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
              <a href="#seccion1" aria-controls="" data-toggle="tab" role="tab">Sección #1</a>              
            </li>
            <li role="presentation">
              <a href="#seccion2" aria-controls="" data-toggle="tab" role="tab">Sección #2</a>             
            </li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" role="tabpanel" id="seccion1">
              <br><br>
              <table id="example1" class="table table-striped" cellspacing="0" width="100%">
               <thead>
                 <tr>
                   <th>Name</th>
                   <th>Position</th>
                   <th>Office</th>
                   <th>Age</th>
                   <th>Start date</th>
                   <th>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>Tiger Nixon</td>
                   <td>System Architect</td>
                   <td>Edinburgh</td>
                   <td>61</td>
                   <td>2011/04/25</td>
                   <td>$320,800</td>
                 </tr>
               </tbody>
             </table>
            </div>
            <div class="tab-pane" role="tabpanel" id="seccion2">
              <br><br>
              <table id="example2" class="table table-striped" cellspacing="0" width="100%">
               <thead>
                 <tr>
                   <th>Name</th>
                   <th>Position</th>
                   <th>Office</th>
                   <th>Age</th>
                   <th>Start date</th>
                   <th>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>Tiger Nixon2</td>
                   <td>System Architect2</td>
                   <td>Edinburg2h</td>
                   <td>61</td>
                   <td>2011/04/25</td>
                   <td>$3202,800</td>
                 </tr>
               </tbody>
             </table>
            </div>
          </div>
        </div>
     </div>
   </div>
</div>

Acá te dejo un ejemplo con la solución que te propongo:

$(document).ready(function(){
  var tabla1 = iniciarDataTable('example1');
  var tabla2 = iniciarDataTable('example2');
  
  $('.nav-tabs a').on('shown.bs.tab', function(event){
    var referencia = $(event.target).attr("href"); 
      if(referencia == "#seccion1")
        tabla1.columns.adjust();
      if(referencia == "#seccion2")
        tabla2.columns.adjust();
    });
});

function iniciarDataTable(id){
  var table = $('#'+id).DataTable({
     scrollX: true
  });

  return table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<div class="container-fluid">
   <br>
   <div class="row">
     <div class="col-xs-12">
       <div role="tabpanel">

					<ul class="nav nav-tabs" role="tablist">
						<li role="presentation" class="active">
              <a href="#seccion1" aria-controls="" data-toggle="tab" role="tab">Sección #1</a>              
            </li>
						<li role="presentation">
              <a href="#seccion2" aria-controls="" data-toggle="tab" role="tab">Sección #2</a>             
            </li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane active" role="tabpanel" id="seccion1">
              <br><br>
							<table id="example1" class="table table-striped" cellspacing="0" width="100%">
               <thead>
                 <tr>
                   <th>Name</th>
                   <th>Position</th>
                   <th>Office</th>
                   <th>Age</th>
                   <th>Start date</th>
                   <th>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>Tiger Nixon</td>
                   <td>System Architect</td>
                   <td>Edinburgh</td>
                   <td>61</td>
                   <td>2011/04/25</td>
                   <td>$320,800</td>
                 </tr>
               </tbody>
             </table>
						</div>
						<div class="tab-pane" role="tabpanel" id="seccion2">
              <br><br>
							<table id="example2" class="table table-striped" cellspacing="0" width="100%">
               <thead>
                 <tr>
                   <th>Name</th>
                   <th>Position</th>
                   <th>Office</th>
                   <th>Age</th>
                   <th>Start date</th>
                   <th>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>Tiger Nixon2</td>
                   <td>System Architect2</td>
                   <td>Edinburg2h</td>
                   <td>61</td>
                   <td>2011/04/25</td>
                   <td>$3202,800</td>
                 </tr>
               </tbody>
             </table>
						</div>
					</div>
				</div>
     </div>
   </div>
</div>

Saludos!

1
  • EXCELENTE! Muchisimas gracias :D
    – Villatoro
    Commented el 9 mar. 2018 a las 0:51

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.