Send Checkbox values of a datatables

Question

Send Checkbox values of a datatables

Navigation

#1 by (0 votes)

1

I have a problem sending the value of input in state checked to my controller, unfortunately I only send the values of the page where I am at that moment and not all the pages where I have selected a checkbox , what I mean with pages is because I'm using the datatables pagination.

My code is as follows:

<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>&nbsp;Selección articulo</th>
                        <th><i class="fa fa-list-ol"></i>&nbsp;Cantidad</th>
                        <th><i class="fa fa-building"></i>&nbsp;Marca</th>
                        <th><i class="fa fa-list"></i>&nbsp;Categoria</th>
                        <th><i class="fa fa-usd"></i>&nbsp;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 appreciate, I tried to make a script to collect all the values and send them to my controller. However, I can not do it. I'm not very good with the JS.

I found that someone did this snippet for this problem however I do not 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.

javascript jquery php datatables

asked by ByGroxD 22.12.2017 в 19:24

source

1 answer

Error "connection closed" in SSH access to CentOS 7 Download object as file in AngularJS

score 0 · Answer 1

What is promised is debt, solve the same problem in the following way:

First remove the checkbox type input from the table and leave only the empty td:

<form action="venta.php" method="post" id="form">
    <table id="inventario" class="table table-hover table-bordered table-condensed">
        <thead>
            <tr>
                <th><i class="fa fa-check"></i>&nbsp;Selección articulo</th>
                <th><i class="fa fa-list-ol"></i>&nbsp;Cantidad</th>
                <th><i class="fa fa-building"></i>&nbsp;Marca</th>
                <th><i class="fa fa-list"></i>&nbsp;Categoria</th>
                <th><i class="fa fa-usd"></i>&nbsp;Precio</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($articulos as $articulo): ?>
            <tr>
                <td></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="button" class="btn btn-warning" name="vender" value="Vender" id="vender">
</form>

Add the links of the select library of datatables:

<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>

To use the library we do it in the following way, in this case on the first td of each row.

$(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        }
    } );
} );

At this point we should already see the checkbox inputs in the first column and we should be able to select them.

Then to obtain the selected elements we can do it in the following way:

First the form you can put id = form to be able to identify it and the button you can put type="button" so that it is not automatically subpoenaed and id="sell" to capture the event later (in the html of above these changes are already applied).

Then you could capture the selected elements by clicking on the "sell" button, add them to the form with inputs type="hidden" with the ids of those elements and subform the form.

$('#vender').on('click', function (event) {
    event.preventDefault();

    var seleccionados = table.rows({ selected: true }).data();

    if(!seleccionados.length)
        alert("No ha seleccionado ningún producto");
    else{
        var i=0;
        while(i < seleccionados.length){
            $('<input>', {
                type: 'hidden',
                value: seleccionados[i][1],
                name: 'ids[]'
            }).appendTo('#form');
            i++;
        }
        $("#form").submit();
    }
});