I have two tables that are in separate tabs (I attach an image for better understanding), when viewing them on mobile devices, the first tab, the table is fully responsive, but when clicking on the second tab, said table is not responsive, I have the same DataTable configuration for both tables which are displayed via Ajax and a controller via CodeIgniter. I don't know what the problem could be so I need your help.
Script to show the first table of the first tab
$(document).ready(function () {
$('#tablaReporteServicioTecnico').DataTable({
ajax: 'http://localhost/ci3/reportes/mostrarServicioTecnico',
dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
order: [],
responsive: true,
autoWidth: false,
processing: true,
language: {
"sProcessing": "Procesando...",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
},
// Select2 for length menu styling
// Initialize
search: '<span>Filtro:</span> _INPUT_',
searchPlaceholder: 'Escriba para buscar...',
lengthMenu: '<span>Mostrar:</span> _MENU_',
paginate: {
'first': 'First',
'last': 'Last',
'next': $('html').attr('dir') == 'rtl' ? '←' : '→',
'previous': $('html').attr('dir') == 'rtl' ? '→' : '←'
}
},
})
$('.dataTables_length select').select2({
minimumResultsForSearch: Infinity,
dropdownAutoWidth: true,
width: 'auto'
});
});
Script to show table in second tab
/* VER ORDENES DE TRABAJO PLOTEO */
$(document).ready(function () {
$('#tablaReportePloteo').DataTable({
ajax: 'http://localhost/ci3/reportes/mostrarPloteo',
dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
order: [],
responsive: true,
autoWidth: false,
processing: true,
language: {
"sProcessing": "Procesando...",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
},
// Select2 for length menu styling
// Initialize
search: '<span>Filtro:</span> _INPUT_',
searchPlaceholder: 'Escriba para buscar...',
lengthMenu: '<span>Mostrar:</span> _MENU_',
paginate: {
'first': 'First',
'last': 'Last',
'next': $('html').attr('dir') == 'rtl' ? '←' : '→',
'previous': $('html').attr('dir') == 'rtl' ? '→' : '←'
}
},
})
$('.dataTables_length select').select2({
minimumResultsForSearch: Infinity,
dropdownAutoWidth: true,
width: 'auto'
});
});
First Tab Table Controller
public function mostrarServicioTecnico() {
$resultadoList = $this->reportes_model->mostrarServicioTecnico();
$resultado = array();
$i = 1;
if (!empty($resultadoList)) {
foreach ($resultadoList as $key => $value) {
$fecha = $value['Fecha_OTServicioTecnico'];
setlocale(LC_ALL, 'spanish');
$fechaNueva = strftime("%d de %B de %Y a las %H:%M:%S", strtotime($fecha));
$nombreApellido = $value['Nombre_Cliente'] . ' ' . $value['Apellido_Cliente'];
$acciones = '<div class="list-icons"><a href="#" id="verReporteOtServicioTecnico" value="' .
$value['ID_OTServicioTecnico'] . '" class="btn btn-primary btn-icon" type="button"><i class="icon-info22"></i></a>';
$resultado['data'][] = array(
$i++,
$nombreApellido,
$value['Nombre_Documento'],
$value['NumeroDocumento_OTServicioTecnico'],
$value['Descripcion_OTServicioTecnico'],
$fechaNueva,
$value['Total_OTServicioTecnico'],
$acciones
);
}
} else {
$resultado['data'] = array();
}
echo json_encode($resultado);
}
Second Tab Table Controller
/* MOSTRAR ORDENES DE TRABAJO PLOTEO */
public function mostrarPloteo() {
$resultadoDb = $this->reportes_model->mostrarPloteo();
$resultado = array();
$i = 1;
if (!empty($resultadoDb)) {
foreach ($resultadoDb as $key => $value) {
$fecha = $value['Fecha_OTPloteo'];
setlocale(LC_ALL, 'spanish');
$fechaNueva = strftime("%d de %B de %Y a las %H:%M:%S", strtotime($fecha));
$nombreApellido = $value['Nombre_Cliente'] . ' ' . $value['Apellido_Cliente'];
$acciones = '<div class="list-icons"><a href="#" id="verReporteOtPloteo" value="' .
$value['ID_OTPloteo'] . '" class="btn btn-primary btn-icon" type="button"><i class="icon-info22"></i></a>';
$resultado['data'][] = array(
$i++,
$nombreApellido,
$value['Nombre_Documento'],
$value['NumeroDocumento_OTPloteo'],
$fechaNueva,
$value['Total_OTPloteo'],
$acciones
);
}
} else {
$resultado['data'] = array();
}
echo json_encode($resultado);
}
If the table or its container are hidden the browser will not calculate
width
the column value and the browserresponsive
will not start correctly .You can call responsive.recalc() when the table becomes visible.
In this case it would correspond to the event
shown.bs.tab
. You can add this code inside the function$(document).ready