1

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í: introducir la descripción de la imagen aquí

Si hay alguno sin seleccionar (o ninguno seleccionado), debe verse así:

introducir la descripción de la imagen aquí

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í:

introducir la descripción de la imagen aquí

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

1 respuesta 1

0

ya lo he resuelto. Se trataba de asignar las funciones necesarias en el evento init.dt de Datatable.

var tablaCrotales = $('#tabla-crotales').on('init.dt', function () {
            customColumnHeader(this.id);
            //selectedRows();
            $('#myModal').modal('hide');
            clicarTodosInicio();
            if (contadorActivosTabla()) {
                $('#botonSeleccion').addClass("activo");
            } else {
                $("#botonSeleccion").className = 'btn seleccionar click'
            }
        })
            .DataTable({

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.