79 lines
2.3 KiB
JavaScript
79 lines
2.3 KiB
JavaScript
// new DataTable('#dbContact', {
|
|
// autoWidth: true,
|
|
// responsive: true,
|
|
|
|
// columnDefs: [
|
|
// {
|
|
// targets: 3, // Recuerda, empieza en 0: Fecha(0), Nombre(1), Estado(2), Empleados(3)
|
|
// visible: window.innerWidth >= 1024 && window.innerWidth <= 1439 ? false : true
|
|
// }
|
|
// ],
|
|
|
|
// initComplete: function () {
|
|
// this.api().columns().every(function () {
|
|
// let column = this;
|
|
// let header = $(column.header());
|
|
// let title = header.text().trim();
|
|
|
|
// if (title !== 'Estatus') {
|
|
// header.append('<div class="filter"><input type="text" class="form-control" placeholder=" Filtro ' + title + '" /></div>');
|
|
// $('input', header).on('keyup change', function () {
|
|
// if (column.search() !== this.value) {
|
|
// column.search(this.value).draw();
|
|
// }
|
|
// });
|
|
// }
|
|
// });
|
|
// }
|
|
// });
|
|
|
|
let table = new DataTable('#dbContact', {
|
|
autoWidth: true,
|
|
responsive: true,
|
|
initComplete: function () {
|
|
this.api().columns().every(function () {
|
|
let column = this;
|
|
let header = $(column.header());
|
|
let title = header.text().trim();
|
|
|
|
if (title !== 'Estatus') {
|
|
header.append('<div class="filter"><input type="text" class="form-control" placeholder=" Filtro ' + title + '" /></div>');
|
|
$('input', header).on('keyup change', function () {
|
|
if (column.search() !== this.value) {
|
|
column.search(this.value).draw();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
function ajustarColumnasSegunPantalla() {
|
|
const width = window.innerWidth;
|
|
|
|
if (width >= 1024 && width <= 1439) {
|
|
// Entre 1024px y 1439px: ocultar solo columna 3
|
|
table.column(3).visible(false);
|
|
// table.column(4).visible(true);
|
|
} else if (width >= 768 && width <= 1023) {
|
|
// Entre 768px y 1023px: ocultar columna 3 y columna 4
|
|
table.column(3).visible(false);
|
|
table.column(4).visible(false);
|
|
table.column(5).visible(false);
|
|
}
|
|
// Otros tamaños: mostrar ambas columnas
|
|
// else {
|
|
// table.column(3).visible(true);
|
|
// table.column(4).visible(true);
|
|
// }
|
|
}
|
|
|
|
// Ejecutar una vez al cargar
|
|
ajustarColumnasSegunPantalla();
|
|
|
|
// Y además ajustar si cambia el tamaño de la ventana
|
|
window.addEventListener('resize', function() {
|
|
ajustarColumnasSegunPantalla();
|
|
});
|