Tengo un problema con DataTables que no estoy pudiendo resolver. Este es el codigo de la tabla
jQuery(document).ready(function($) {
tableContainer = jQuery("#table-1");
tableContainer.dataTable({
// rowReorder: {
// selector: 'td:nth-child(1)'
// },
'order': [
[0, 'desc']
],
"pageLength": 25,
"processing": true,
"serverSide": true,
"bStateSave": true,
"processing": true,
"serverSide": true,
"ajax": {
"url": adminAjax,
type: 'POST',
dataSrc: 'data',
'data': function(data) {
// PODEMOS MODIFICAR EL OBJETO QUE SE MANDA POR AJAX A LA CONSULTA
var DatosForm = Get_data_form();
data = $.extend({}, data, DatosForm);
console.log( data );
LastData = data;
return data;
},
},
"drawCallback": function(settings) {
// Here the response
var response = settings.json;
console.log(response);
},
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// Esto modifica el buscador, agregando un placeholder
// let stringBuscar = $("#table-1_filter").html();
// let str2 = stringBuscar.replace('Buscar: ','');
// let str3 = str2.replace('placeholder=""','placeholder="Buscar..."');
// $("#table-1_filter").html(str3);
//Esto el selector de cantidad de pagnas
// let stringCant = $("#table-1_length").html();
// let str = stringCant.replace(' Registros por página',' Registros')
// $("#table-1_length").html(str)
// No creo que vaya aca
console.log(aData);
$('.dataTables_scroll').parent().css('padding', '0');
$('#ediatr_info_solicitud .container .row .col-sm-8 input').removeClass('form-control');
$('td:eq(0)', nRow).addClass('td-titulo').attr('data-id', aData.id);
$('td:eq(1)', nRow).addClass('td-modalidad');
$('td:eq(2)', nRow).addClass('td-empleados');
$('td:eq(3)', nRow).addClass('td-fecha');
$('td:eq(5)', nRow).addClass('td-estado');
if (aData.estado == '1') {
$('td:eq(4)', nRow).addClass('tabla-estado-pendiente');
} else if (aData.estado == '2') {
$('td:eq(4)', nRow).addClass('tabla-estado-revision');
} else if (aData.estado == '3') {
$('td:eq(4)', nRow).addClass('tabla-estado-aprobada');
} else if (aData.estado == '4' || aData.estado == '5') {
$('td:eq(4)', nRow).addClass('tabla-estado-rechazada');
} else if (aData.estado == '90') {
$('td:eq(4)', nRow).addClass('tabla-estado-realizada');
}
},
"columns": [{
"data": "post_title",
"name": "p.post_title",
"title": "Curso",
"orderable": true,
"width": "30%",
responsivePriority: 1,
"className": 'sys_open_box'
},
{
"data": "modalidad",
"name": "p.modalidad",
"title": "Modalidad",
"orderable": true,
"width": "10%",
"className": 'tabla-tipo tabla-modalidad'
},
{
"data": "cantidad",
"name": "c.cantidad",
"title": "Empleados",
"orderable": true,
"width": "5%",
"className": 'tabla-tipo tabla-modalidad'
},
{
"data": "nom_periodo",
"name": "pe.fecha_desde",
"title": "Fecha estimada",
"orderable": true,
"width": "35%",
"className": 'tabla-fecha'
},
{
"data": "estado_text",
"name": "estado_text",
"title": "Estado",
"orderable": true,
"width": "10%",
"className": 'tabla-empleados'
},
{
"data": "acciones",
"name": "",
"title": "Acciones",
"orderable": false,
"width": "10%",
"className": 'tabla-empleados',
responsivePriority: 1
},
],
"oLanguage": {
"sLengthMenu": "Mostrar _MENU_ Registros por página",
"sSearch": "",
"searchPlaceholder": 'Buscar...',
"sProcessing": "Cargando...",
"sLoadingRecords": 'Cargando...',
"sZeroRecords": "No se encontraron Registros.",
"sEmptyTable": "No se encontraron Registros.",
"sInfo": "Registros desde _START_ a _END_ de _TOTAL_ totales",
"sInfoEmpty": "Registros desde 0 a 0 de 0 total",
"sInfoFiltered": "(Registros Totales _MAX_)",
"info": "Showing page _PAGE_ of _PAGES_",
"oPaginate": {
"sFirst": "Premier",
"sLast": "Ultima",
"sNext": ">",
"sPrevious": "<"
}
},
"language": {
search: '',
searchPlaceholder: 'Buscar...'
},
initComplete: function() {
$("#table-1_filter").append(
`<div class="container-filtro-mis-solicitudes">
<div class="mis-solicitudes-filtro">
<div class="selected-curso">
<span>Filtrar...</span><i class="fas fa-chevron-down"></i>
</div>
<div class="options-cursos">
<div class="option-curso" data-id="">
Ver todos
</div>
<?php foreach ($categorias as $c) { ?>
<div class="option-curso" data-id="<?php echo $c->term_id; ?>">
<?php echo $c->name; ?>
</div>
<?php } ?>
</div>
</div>
</div>
` +
'<div class="export-data">' +
' <div class="DTTT btn-group"> ' +
//' <a href="javascript:exportar_consulta_excel();" class="btn btn-white DTTT_button_print" title="Exportar resultados"><span>Exportar resultados</span></a>' +
//' <a href="javascript:exportar_all_excel();" class="btn btn-white DTTT_button_print" title="Exportar Todo"><span>Exportar todo</span></a>' +
' </div>' +
'</div>'
);
$('#table-1 > tbody > tr').addClass('tr_clas_users');
// jQuery("#table-1").append( jQuery('<tfoot/>').append( jQuery("#table-1 thead tr").clone() ) );
},
// 'responsive' : true,
'bAutoWidth': false
});
$("#table-1_wrapper .dataTables_filter input")
.unbind() // Unbind previous default bindings
.bind("input", function(e) { // Bind our desired behavior
// If the length is 3 or more characters, or the user pressed ENTER, search
if (this.value.length >= 3 || e.keyCode == 13) {
// Call the API search function
tableContainer.api().search(this.value).draw();
}
// Ensure we clear the search if they backspace far enough
if (this.value == "") {
tableContainer.api().search("").draw();
}
return;
});
});
Y lo que me ocurre es lo siguiente:
Si yo estoy en un dispositivo movil, solo veo los titulos de mi tabla (la primer columna), y eso esta perfecto. Es como yo lo quiero.
Ahora, si yo hago una busqueda que NO arroje resultados, ocurre el siguiente error:
Como pueden ver, si no hay resultados vienen otras columnas que no deberian mostrarse. Alguien conoce alguna solucion para esto? Muchas gracias