0

Estoy realizando una aplicación web y una de las tareas consiste en crear un botón que seleccione (deseleccione) todas las filas de un dataTable cada vez que se pulsa. El código es el siguiente, está realizado con jQuery y Javascript:

function allCheckUnCheck() {

    var totalColumnas = $("#tabla-datos").DataTable().columns().nodes()[0].length;
    var columnas = $("#tabla-datos").DataTable().columns().nodes();
    var contadorNoClicados = 0;
    var arrPosicionesNoClicadas = [];

    $("#checkTodos").click(function () {

        for (var cont = 0; cont < totalColumnas; cont++) {
            var columnaActual = $("#tabla-datos").DataTable().columns().nodes()[0][cont].firstChild
            if (!columnaActual.hasClass("activo")) {
                contadorNoClicados++;
                arrPosicionesNoClicadas.push(cont);
            }

        }
        if (contadorNoClicados > 0) {
            var longitudNoClicados = arrPosicionesNoClicadas.length
            for (var contClic = 0; contClic < longitudNoClicados; contClic++) {
                var posActualarrNoClicado = arrPosicionesNoClicadas[contClic];
                var columnaActualNoClicada = $("#tabla-datos").DataTable().columns().nodes()[0][posActualarrNoClicado].firstChild.classList.add("activo");
            }
        } else if (contadorNoClicados === 0) {
            for (var contTotal = 0; contTotal < totalColumnas; contTotal++) {
                $("#tabla-datos").DataTable().columns().nodes()[0][contTotal].firstChild.classList.remove("activo");
            }
        }

    }
    );



};

La forma de seleccionar una celda es aplicar la clase activo.

El datatable es el siguiente:

function loadDatosDataTable(dataSet) {

    //cargamos los datos que puedan venir 
   datos = [];
    Array.prototype.push.apply(datos, dataSet);

   

    //console.log(dataSet);
    var columnDefs = [
           {
               "targets": [4], 
               "visible": false
           },
           {
               "targets": [0],
               "orderData": [4]
           }
    ];
  

    $.fn.dataTable.moment(selectedLanguageMomentDateType2);
    var tablaDatos = $('#tabla-datos').on('init.dt', function () {
        customColumnHeader(this.id);
        //selectedRows();
        $('#myModal').modal('hide');
    })
        .DataTable({
           
            "data": dataSet,
          
            "bProcessing":true,
            "paging": true,
            
            "bInfo": true, //Dont display info eg "Showing 1 to 4 of 4 entries"
            
            "columnDefs": columnDefs,
            "autoWidth": true,
            "scrollX": true,
           
            "deferRender": true,
            "lengthMenu": [[10, 25, 50, 100,-1], [10, 25, 50,100, "Todos"]],
            "columns": [
      
                {
                    //"width":25,
                    "data": null, "title": "<div id='name'>" + literalesPage[53739] + "</div>" +   "<button type='button'   onclick='allCheckUnCheck()' value='Seleccionar/Deseleccionar' id='checkTodos'>" +
                    " <label for='checkTodos'>Sel./Desel. Todos</label>"


                  
                    ,
                    "render": function (data, type, full, meta) {
                        if (full.apto=="true" ) {
                            button = '<button class="btn seleccionar click activo"  onclick="clikadoDato(this,\'' + isNull(data.resultado) + '\')" type="input"></button>';
                        } else {

                            button = '<button class="btn seleccionar click"  onclick="clikadoDato(this,\'' + isNull(data.resultado) + '\')" type="input"></button>';
                        }
                        return button;
                    }
                },
                { "data": "dato", "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": "apto", "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-datos').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(tablaDatos);
        }
    );

El problema que me da es que a la hora de cargar el datatable, para probar el evento, me aparece el siguiente mensaje:

DataTables warning: table id=tabla-datos - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

¿Se puede seleccionar este error? ¿A qué se debe? La información que da no me ha resultado útil. Gracias de antemano.

4
  • 1
    ¿Leíste el contenido del enlace que te da de referencia el mensaje de error? ¿Hiciste lo que sugiere la documentación?
    – padaleiana
    Commented el 17 mar. 2023 a las 11:50
  • Si, Gracias. Ya está resuelto. Se trataba de que había un retardo a la hora de recibir los datos. Solucionado con el setTimeOut. Un saludo Commented el 17 mar. 2023 a las 12:12
  • Entonces ponlo como respuesta, en base a Cómo responder, y acéptala cuando transcurra el tiempo mínimo.
    – padaleiana
    Commented el 17 mar. 2023 a las 12:17
  • De acuerdo. Un saludo. Commented el 17 mar. 2023 a las 12:17

1 respuesta 1

1

Se trataba de un problema de asincronía. Solucionado con promesas o setTimeout. Gracias de nuevo.

1
  • 2
    ¡No olvides colocarlo como código! Recuerda que otras personas podrían tener un problema similar al tuyo, es por eso lo de responder en base a Cómo responder.
    – padaleiana
    Commented el 17 mar. 2023 a las 12:28

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.