Estoy realizando un botón que selecciona/deselecciona todos los botones que se encuentran en un datatable. Su estilo está condicionado a que estén todos los elementos seleccionados o no de la datatable. Por ejemplo, si están todos seleccionados debe aparecer así:
Si hay alguno sin seleccionar (o ninguno seleccionado), debe verse así:
El código utilizado es el siguiente:
//Contamos todos los activos para una mejor gestión de los eventos
function contadorActivos() {
var totalFilasTabla = $("#tabla-crotales").DataTable().rows()[0].length;
var contadorActivos = 0;
for (var contador = 0; contador < totalFilasTabla; contador++) {
var botonActualTabla = $("#tabla-crotales").DataTable().columns().nodes()[0][contador].firstChild;
if (botonActualTabla.className == 'btn seleccionar click activo') {
contadorActivos += 1;
}
}
if (contadorActivos !== totalFilasTabla) {
$("#botonSeleccion").className = 'btn seleccionar click'
}
if (contadorActivos === totalFilasTabla && !$("#botonSeleccion").hasClass("activo")) {
$("#botonSeleccion").addClass("activo");
}
}
function allCheckUnCheck(btn) {
//var elementoBuscador = $("input[type=search]").val();
clicarUltimo();
var totalFilas = $("#tabla-crotales").DataTable().rows()[0].length;
var columnas = $("#tabla-crotales").DataTable().columns().nodes();
if (btn.className == 'btn seleccionar click') {
for (var contClic = 0; contClic < totalFilas; contClic++) {
var botonActual = $("#tabla-crotales").DataTable().columns().nodes()[0][contClic].firstChild;
if (botonActual.className == 'btn seleccionar click') {
var rescrointActual = crotales[contClic].rescroint;
clikadoCrotal(botonActual, rescrointActual);
}
}
btn.className = 'btn seleccionar click activo';
} else if (btn.className == 'btn seleccionar click activo') {
for (var contTotal = 0; contTotal < totalFilas; contTotal++) {
var hayBotonActualTotal = $("#tabla-crotales").DataTable().columns().nodes()[0][contTotal]
if (hayBotonActualTotal) {
var botonActualTotal = $("#tabla-crotales").DataTable().columns().nodes()[0][contTotal].firstChild;
var rescroActual = crotales[contTotal].rescroint;
if (botonActualTotal.className == 'btn seleccionar click activo') {
clikadoCrotal(botonActualTotal, rescroActual);
}
}
}
btn.className = 'btn seleccionar click';
}
}
//Contamos todos los activos para una mejor gestión de los eventos
function contadorActivosTablaCrotales_bis() {
var totalFilasTabla = $("#tabla-crotales").DataTable().rows()[0].length;
var contadorActivos = 0;
for (var contador = 0; contador < totalFilasTabla; contador++) {
var botonActualTabla = $("#tabla-crotales").DataTable().columns().nodes()[0][contador].firstChild;
if (botonActualTabla.className == 'btn seleccionar click activo') {
contadorActivos += 1;
}
}
if (contadorActivos !== totalFilasTabla) {
$("#botonSeleccion").className = 'btn seleccionar click'
}
if (contadorActivos === totalFilasTabla && !$("#botonSeleccion").hasClass("activo")) {
$("#botonSeleccion").addClass("activo");
}
}
function clikadoCrotal(b, rescroint) {
if (b.className == 'btn seleccionar click activo') {
//viene de estar activo y se desactiva
//hay que desvacunar
b.className = 'btn seleccionar click'
//Seleccionamos el boton de seleccion total
var boton = $("#botonSeleccion")
if (boton.hasClass("activo")) {
boton.removeClass("activo");
}
//desvacunar crotal
vacunarCrotal(rescroint, "false")
cambiarValorColumna="true"
}
else {
if (b.className == 'btn seleccionar click') {
//mirar si hay dosis disponible
if (modo == "A") {
var num = numCrotalesAVacunar()
if (num + 1 > parseInt(dosisdisponibles)) {
$("#numcrotalesvacunados")[0].innerHTML = "<div id='name'>" + literalesPage[53735] + ":<b> " + dosisdisponibles + "</b>.<br>" + literalesPage[53752] + ":<b style='color:red;font-size:medium'> " + num + "</b></div>";
$("#alert-dosisdisponibles").modal('show');
cambiarValorColumna = "false"
//alert("no hay dosis disponibles")
} else {
; //viene de estar desactivado y se activa
//hay que vacunar
b.className = 'btn seleccionar click activo'
//vacunar crotal
vacunarCrotal(rescroint, "true");
cambiarValorColumna = "true"
};
} else {
if (modo == "E") {
//miro a ver si puedo vacunar uno mas
var vacunasAutilizar = numCrotalesAVacunar() + 1;
if ((parseInt(dosisdisponibles) + parseInt(numresesvacunadas)) >= vacunasAutilizar) {
; //viene de estar desactivado y se activa
//hay que vacunar
b.className = 'btn seleccionar click activo'
//vacunar crotal
vacunarCrotal(rescroint, "true");
cambiarValorColumna = "true"
} else {
//no hay suficientes vacunas
$("#numcrotalesvacunados")[0].innerHTML = "<div id='name'>" + literalesPage[53735] + ":<b>" + (parseInt(dosisdisponibles) + parseInt(numresesvacunadas)) + "</b>.<br>" + literalesPage[53752] + ":<b style='color:red;font-size:medium'>" + vacunasAutilizar + "</b></div>";
$("#alert-dosisdisponibles").modal('show');
cambiarValorColumna = "false"
return false;
};
};
};
}
}
contadorActivos();
};
Todo va bien, pero hay un problema pequeña: cuando cambio de página y vuelvo a esta misma, el botón no guarda el estilo que debería. Por ejemplo, si paso a la siguiente página (o retrocedo), y no he seleccionado algún elemento, debería verse así:
Y sin embargo, se ve con el estilo contrario.
Mi datatable:
var columnDefs = [
{
"targets": [4],
"visible": false
},
{
"targets": [0],
//"orderDataType": 'dom-checkbox'. Añadimos un
"orderData": [4]
}
];
$.fn.dataTable.moment(selectedLanguageMomentDateType2);
var tablaCrotales = $('#tabla-crotales').on('init.dt', function () {
customColumnHeader(this.id);
//selectedRows();
$('#myModal').modal('hide');
if (contadorActivosTabla()) {
$('#botonSeleccion').addClass("activo");
} else {
$("#botonSeleccion").className = 'btn seleccionar click'
}
})
.DataTable({
//"destroy": true,//1
"data": dataSet,
//"ordering": false,//2
//"searching": false,//3
"bProcessing": true,
"paging": true,
//"lengthChange": false,//4
//"autoWidth": false,
"bInfo": true, //Dont display info eg "Showing 1 to 4 of 4 entries"
//"paging": false,//Dont want paging
//"bPaginate": false,//Dont want paging
"columnDefs": columnDefs,
"autoWidth": true,
"scrollX": true,
//"bServerSide":true,//5
"deferRender": true,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]],
"columns": [
{
//"width":25,"<div id='name'>" + literalesPage[53739] + class='btn seleccionar click'
"data": null, "title": "<div id='name' >" + "<button type='button' id='botonSeleccion' onclick='allCheckUnCheck(this);' class='btn seleccionar click'></button> " + "</div>"
,
"render": function (data, type, full, meta) {
if (full.vacunado == "true") {
button = '<button class="btn seleccionar click activo" onclick="clikadoCrotal(this,\'' + isNull(data.rescroint) + '\')" type="input"></button>';
} else {
button = '<button class="btn seleccionar click" onclick="clikadoCrotal(this,\'' + isNull(data.rescroint) + '\')" type="input"></button>';
}
return button;
},
},
{ "data": "crotal", "title": "<div id='name' >" + literalesPage[53723] + "</div>" },
{
"data": "fechanacimiento",
"title": "<div id='name'>" + literalesPage[53753] + "</div>",
"orderable": true
},
{
"data": "fecha",
"title": "<div id='name'>" + literalesPage[53740] + "</div>",
//"render": function (data, type, full, meta) {
// var fecha;
// if ((full.fecha != null)&(full.fecha != "")) {
// fecha = moment(full.fecha, momentDateTypes[selectedLanguage]).format(WSMomentDateType);
// };
// return fecha;
//}, class='asc'
"orderable": true
},
{ "data": "vacunado", "title": "<div id='name' > hidden</div>" }
//,
//{
// "data": "",
// // "className": 'anular',
// "orderable": false,
// "render": function (data, type, full, meta) {
// html = "";
// if (full.fecha != "") {
// html = '<a data-toggle="modal" data-target="#confirm-anular"><i id="anular" style="color: #2567e0" class="fa fa-trash"></a>';
// };class='asc'
// return html;
// }
//}
],
"order": [],
"language": {
"url": datatableLanguageUrl
}
});
$('#tabla-crotales').on('draw.dt',
function () {
$('button[id^="pop"]').each(
function (index, button) {
var motivonoapto = tablaCrotales.row($(button).closest('tr')).data().motivonoapto;
$(button).parents('td').popover({ 'placement': 'top', 'content': motivonoapto, 'container': 'td' });
}
);
controlOrderShowHide(tablaCrotales);
}
);
function contadorActivosTabla() {
var totalFilasTabla = $("#tabla-crotales").DataTable().rows()[0].length;
var contadorActivos = 0;
for (var contador = totalFilasTabla - 1; contador >= 0; contador--) {
var botonActualTabla = $("#tabla-crotales").DataTable().columns().nodes()[0][contador].firstChild;
if (botonActualTabla.className == 'btn seleccionar click activo') {
contadorActivos += 1;
}
}
if (contadorActivos !== totalFilasTabla) {
return false;
}
if (contadorActivos === totalFilasTabla) {
return true;
}
}
¿Por qué no me funciona? He probado eventos como cargar página y sigue sin resolverse el problema.
Gracias de antemano