I have a problem sending the value of the inputin status checkedto my controller, unfortunately it only sends me the values of the page I am on at that moment and not that of all the pages where I have selected a checkbox, which I mean by paginas is because I am using pagination from datatables.
My code is the following:
<div class="container">
<h2>Ventas</h2>
<form action="venta.php" method="POST">
<table id="inventario" class="table table-hover table-bordered table-condensed">
<thead>
<tr>
<th><i class="fa fa-check"></i> Selección articulo</th>
<th><i class="fa fa-list-ol"></i> Cantidad</th>
<th><i class="fa fa-building"></i> Marca</th>
<th><i class="fa fa-list"></i> Categoria</th>
<th><i class="fa fa-usd"></i> Precio</th>
</tr>
</thead>
<tbody>
<?php foreach ($articulos as $articulo): ?>
<tr>
<td><label class="checkbox-inline"><input name="articulos[]" type="checkbox" value="<?php echo $articulo['id']; ?>"><?php echo $articulo['nombre']; ?></label></td>
<td><?php echo $articulo['cantidad']; ?></td>
<td><?php echo $articulo['categoria']; ?></td>
<td><?php echo $articulo['marca']; ?></td>
<td><?php echo number_format($articulo['precio_u']); ?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
<input type="submit" class="btn btn-warning" name="vender" value="Vender">
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#inventario').DataTable();
var dataArr = [];
$('tr').filter(':has(:checkbox:checked)').each(function() {
dataArr.push($(this).find('input').eq(0).val());
console.log(dataArr);
});
} );
</script>
As some of you could see, I tried to make a script to collect all the values and be able to send them to my controller, however I can't do it, I'm not very good with JS.
I found that someone made this snippet for this problem, however I don't know how to complement it.
var rows = $(('#datatable')
.rows({ 'search': 'applied' })
.nodes()).filter(':has(:checkbox:checked)');//busca todos los registros del datatable
rows.each(function(index,elem){
//cada row es un tr
console.log($('datatable').row(elem).data());
});
If it is necessary to use ajax to send all the values of the selected checkboxes, I have no problem.
Promised is debt, solve the same problem as follows:
First remove the input of type checkbox from the table and leave only the empty td:
Add the datatables select library bindings:
To use the library we do it as follows, in this case on the first td of each row.
At this point we should already see the checkbox inputs in the first column and we should be able to select them.
Then to get the selected elements we can do it as follows:
First you can put id=form to the form to be able to identify it and you can put type="button" to the button so that it is not submitted automatically and id="sell" to capture the click event later (in the html above these changes are already applied).
You could then capture the items selected by clicking the "sell" button, add them to the form with inputs type="hidden" with the ids of those items, and submit the form.
EDIT
A comment was added to the code to differentiate the multiple selection from the single one, the versions of the libraries were updated and a working example was added.
Here is a working example:
It was a bit simpler for me... before getting the selected checkboxes we must undo the datatable format. In a javascript function that will save the selected checkboxes, do the following:
Greetings.