Obtener valores de un datatable por checkbox
Publicado por Darwin (1 intervención) el 09/12/2019 22:27:58
Hola a todos, quiero obtener los valores de las filas que estén seleccionadas por el checkbox de mi datatable al dar click a mi boton, y los valores obtenidos los quiero almacenar en un json.
-----------------------------------------------------------------------------------------
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<table class="table table-striped table-bordered" data-page-length="2" id="tbl-buys">
<thead>
<tr>
<th>
<input type="checkbox" />
</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Precio</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!--<label>Total</label><input type="text" id="total" class="form-control" readonly value="0.0" />--><br>
<button id="btnObtener">Obtener</button>
-----------------------------------------------------------------------------------------
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
$(document).ready(function() {
function crearTabla(datos) {
let $dt = $('#tbl-buys');
let dt = $dt.DataTable({
data: datos,
order: false,
columns: [{
render: function(data, type, full, meta) {
// ACA controlamos la propiedad para des/marcar el inputreturn "<input type='checkbox'" + (full.checked ? ' checked' : '') + "/>";
},
orderable: false},
{data: 'Producto',
orderable: false},
{data: 'Cantidad',
orderable: false},
{data: 'Precio',
orderable: false},
]});
let $total = $('#total');
// Cuando hacen click en el checkbox del thead$dt.on('change', 'thead input', function(evt) {
let checked = this.checked;
let total = 0;let data = [];
dt.data().each(function(info) {
// ACA cambiamos el valor de la propiedadinfo.checked = checked;
// ACA accedemos a las propiedades del objetoif (info.checked) total += info.Precio;
data.push(info);
});
dt.clear()
.rows.add(data)
.draw();
$total.val(total);
});
// Cuando hacen click en los checkbox del tbody$dt.on('change', 'tbody input', function() {
let info = dt.row($(this).closest('tr')).data();
let total = parseFloat($total.val());
// ACA accedemos a las propiedades del objetolet price = info.Precio;
total += this.checked ? price : price * -1;
$total.val(total);
});
}crearTabla([{
"Producto": "Leche",
"Cantidad": 50,
"Precio": 3.20
},
{"Producto": "Azucar",
"Cantidad": 40,
"Precio": 2.20
},
{"Producto": "Gaseosa",
"Cantidad": 14,
"Precio": 6.50
}]);
});
Valora esta pregunta
0