Axel Axt
105 lines
3.1 KiB
JavaScript
105 lines
3.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
||
|
||
const table = $('#tablaProductos').DataTable({
|
||
paging: true,
|
||
searching: true,
|
||
ordering: true,
|
||
pageLength: 6,
|
||
lengthChange: false,
|
||
info: true,
|
||
autoWidth: false,
|
||
|
||
columnDefs: [
|
||
{ orderable: false, targets: -1 }
|
||
],
|
||
|
||
dom:
|
||
"<'row mb-3'<'col-md-8'f><'col-md-4 text-end'l>>" +
|
||
"<'row'<'col-12'tr>>" +
|
||
"<'row mt-3'<'col-md-5'i><'col-md-7'p>>",
|
||
|
||
language: {
|
||
search: "",
|
||
searchPlaceholder: "Buscar productos...",
|
||
zeroRecords: "No se encontraron productos",
|
||
info: "Mostrando _START_ a _END_ de _TOTAL_ productos",
|
||
infoEmpty: "No hay productos para mostrar",
|
||
infoFiltered: "(filtrado de _MAX_ productos totales)",
|
||
paginate: {
|
||
next: "›",
|
||
previous: "‹"
|
||
}
|
||
}
|
||
});
|
||
|
||
// Mover buscador al bloque izquierdo
|
||
$('.dataTables_filter')
|
||
.addClass('d-flex align-items-center gap-2')
|
||
.appendTo('#filtrosIzquierda');
|
||
|
||
$('#filtrosIzquierda').append($('#columnFilter'));
|
||
|
||
const searchInput = $('.dataTables_filter input');
|
||
|
||
$('#columnFilter').on('change', function () {
|
||
const colIndex = $(this).val();
|
||
|
||
table.search('').columns().search('').draw();
|
||
|
||
searchInput.off('keyup').on('keyup', function () {
|
||
if (colIndex === "") {
|
||
table.search(this.value).draw();
|
||
} else {
|
||
table.column(colIndex).search(this.value).draw();
|
||
}
|
||
});
|
||
});
|
||
|
||
// (Para poder guardar todos los datos en caso de que el producto no esté visible)
|
||
|
||
$('form').on('submit', function () {
|
||
|
||
const form = this;
|
||
|
||
// Eliminar hidden generados anteriormente
|
||
$(form).find('.dt-hidden').remove();
|
||
|
||
// Recorrer TODAS las filas del DataTable
|
||
table.rows().every(function () {
|
||
|
||
const row = $(this.node());
|
||
const checkbox = row.find('input[name="ids[]"]');
|
||
|
||
if (checkbox.is(':checked')) {
|
||
|
||
const id = checkbox.val();
|
||
const cantidad = row.find('input[name="cantidades[' + id + ']"]').val();
|
||
const costo = row.find('input[name="costos[' + id + ']"]').val();
|
||
|
||
// ID
|
||
$('<input>')
|
||
.attr('type', 'hidden')
|
||
.attr('name', 'ids[]')
|
||
.val(id)
|
||
.addClass('dt-hidden')
|
||
.appendTo(form);
|
||
|
||
// Cantidad
|
||
$('<input>')
|
||
.attr('type', 'hidden')
|
||
.attr('name', 'cantidades[' + id + ']')
|
||
.val(cantidad)
|
||
.addClass('dt-hidden')
|
||
.appendTo(form);
|
||
|
||
// Costo
|
||
$('<input>')
|
||
.attr('type', 'hidden')
|
||
.attr('name', 'costos[' + id + ']')
|
||
.val(costo)
|
||
.addClass('dt-hidden')
|
||
.appendTo(form);
|
||
}
|
||
});
|
||
});
|
||
}); |