tengo una consulta y es la siguiente:
Tengo un checkbox en mi datatable en el <thead>
para seleccionar todos los checkbox del <tbody>
y lo que quiero es que al seleccionar todos los checkbox y luego al modificar un checkbox de las filas se ponga un guión en el checkbox del <thead>
asi como el siguiente ejemplo: https://jsfiddle.net/gyrocode/abhbs4x8/
$(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 input
return "<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 propiedad
info.checked = checked;
// ACA accedemos a las propiedades del objeto
if (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 objeto
info.checked = this.checked;
let price = info.Precio;
total += info.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
}
]);
});
<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" />