0

Tengo el siguiente código html:

<div id="divCreaPDF" class="row">
    <div class="col-md-12">
        <label>Imagenes:</label>
    </div>
    <div class="col-md-9">
        <table id="mTabla-imagenes" class="table table-striped table-bordered table-hover" style="width: 100%">
        </table>
    </div>
    <div class="col-md-3">
        <div class="row">
            <label for="btnAgregarArchivoImg" class="btn btn-primary">Agregar</label>
            <input type="file" name="btnAgregarArchivoImg" id="btnAgregarArchivoImg" style="display: none"/>
        </div>
        <div class="row">
            <input type="button" id="btnQuitarImg" name="btnQuitarImg" value="Quitar" class="btn btn-primary"/>
        </div>
    </div>
</div>

Y el siguiente javascript:

function creaTablaReorder(idTabla,arrayDatos,columnas,defColumnas,idiomaDataTable,funcionComplete,columnaReorder){
    if ($.fn.dataTable.isDataTable(idTabla)){
        var table = $(idTabla).DataTable( );
        table.destroy();
        $(idTabla).empty();
    }
    let tabla=$(idTabla).DataTable({
        "destroy": true,
        "data":arrayDatos,
        "columns": columnas,
        "columnDefs": defColumnas,                     
        "language": idiomaDataTable,
        "processing": true,
        "serverSide": false,
        "scrollY": "425px",
        "sScrollX": "100%",
        "scrollX": true,
        "rowReorder": true,
        "rowReorder": {
            "dataSrc": columnaReorder,
        },
        "select": true,
        "scrollCollapse": true,
        "paging": false,
        "ordering": false,
        "info": false,
        "initComplete":function(setting, json){funcionComplete(setting,json);}
    });
    setTimeout(function(){ 
        tabla.columns.adjust().draw();
    }, 700);
}
let columnasImagenes=[
            {"data":"tamano",className:"reorder",class:"reorder text-right",render:$.fn.dataTable.render.number(',','.',0,'')},
            {"data":"nombre",class:"left"}
        ];
        let columnasDefsImagenes=[
            {"targets": -1, className: "dt-head-center"},//todas las columnas
            {"targets": 0, "title": "Tamaño"},
            {"targets": 1, "title": "Archivo"}
        ];
        let arrayDatos=["",""];
        arrayDatos.push({size:333,name:"dgdsg"});
        arrayDatos.push({size:111,name:"ooo"});
        arrayDatos.push({size:222,name:"uuuu"});
        funcionAlCompletarImg=function(setting,json,datosJson){
            let tablaImg = $("#mTabla-imagenes").DataTable();
            $("#mTabla-imagenes tbody").on("click","tr", function () {
                if ($(this).hasClass("selected")){
                    $(this).removeClass("selected");
                    $("#btnQuitarImg").hide();
                }else{
                    tablaImg.$("tr.selected").removeClass("selected");
                    $(this).addClass('selected');
                    $("#btnQuitarImg").show();
                }
            } );
            
        };
        creaTablaReorder("#mTabla-imagenes",null,columnasImagenes,columnasDefsImagenes,lenguajeGeneralDataTable,funcionAlCompletarImg,"size");

Y el problema lo tengo en la siguiente funcion:

$("#btnAgregarArchivoImg").on("change", function(){ 
        let archivo=$("#btnAgregarArchivoImg").prop("files")[0];
        console.log(archivo);
        if(!(archivo==""||archivo==null||archivo==undefined)){
            let tablaImg = $("#mTabla-imagenes").DataTable();
            let tamano=archivo["size"];
            let nombre=archivo["name"];
            console.log(nombre);
            console.log(tamano);
            tablaImg.row.add([tamano,nombre]).draw(false);
        }
    });

Me sale el siguiente mensaje de error:

DataTables warning: table id=mTabla-imagenes - Requested unknown parameter 'tamano' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Lo que busco es mostrarle al usuario solo los campos nombre y tamano para que el archivo que me dio el input type="file" vaya como una columna oculta. Leyendo dicha pagina entiendo que el problema es porque no puede leer la variable tamano al renderizar el datatable para agregar un fila con los atributos del archivo. Pero por mas que he leído y releído dicha pagina no logro dar con el problema. Al final busco que esta linea tablaImg.row.add([tamano,nombre]).draw(false); quede de la siguiente manera tablaImg.row.add([tamano,nombre,archivo]).draw(false);. ¿Alguien que me diga que estoy haciendo mal? Nota: Los console.log si me imprimen los datos del archivo.

4
  • "", null y undefined son falsy. if( archivo ), if ( !!archivo ) Commented el 30 oct. 2020 a las 2:55
  • Entiendo el comentario, lo que no entiendo es porque dos !!, no seria solo uno???
    – abrahamhs
    Commented el 30 oct. 2020 a las 3:24
  • 1
    La doble negación se utiliza para convertir un objeto a booleano direcamente. obj = { name: 'Diego' }, console.log( !!obj ) // true Commented el 30 oct. 2020 a las 3:26
  • gracias, no sabia eso
    – abrahamhs
    Commented el 30 oct. 2020 a las 3:27

2 respuestas 2

0
+50

El error te lo genera dado que tu defines las columnas a tu Datatable en base un objeto, y por lo tanto cuando añades un registro espera un objeto con esas propiedades, y al buscar esas propiedades en un arreglo que es como se lo proporcionas no localiza las columnas. Lo que espera es un objeto de el tipo {tamano:0, nombre: 'algo'}.

Te dejo el código con el único movimiento que realice, al agregar el row, enviarlo en la forma que lo espera.

$("#btnAgregarArchivoImg").on("change", function () {
        let archivo = $("#btnAgregarArchivoImg").prop("files")[0];
        console.log(archivo);
        if (!(archivo == "" || archivo == null || archivo == undefined)) {
            let tablaImg = $("#mTabla-imagenes").DataTable();
            let tamano = archivo["size"];
            let nombre = archivo["name"];
            console.log(nombre);
            console.log(tamano);
            tablaImg.row.add({ tamano: tamano, nombre: nombre }).draw(false);
        }
});
0
   $("#btnAgregarArchivoImg").on("change", function(){ 
        const archivo=$("#btnAgregarArchivoImg").prop("files")[0];

        if( !!archivo ){
            const tablaImg = $("#mTabla-imagenes").DataTable();
            const tamano=archivo.size;
            const nombre=archivo.name;
            console.log(nombre, tamano);
            tablaImg.row.add([
              ''+(tamano/1024).toFixed(2),
              nombre
            ]).draw(false);
        }
    });

Haz la prueba, ahora.

3
  • He probado esto y no funciona, básicamente creo que no cambio nada porque tamano trae un entero y ''+(tamano/1024).toFixed(2) sigue siendo un entero, gracias por el intento. Obtengo el mismo error.
    – abrahamhs
    Commented el 30 oct. 2020 a las 3:23
  • Me refería a cambiarlo a string, aparte de que son bytes. String(tamano) Commented el 30 oct. 2020 a las 3:24
  • Si, ya he intentado como entero y como string, siento que tiene algo que ver con que al inicio la tabla esta vacía y no conoce los tipos de las columnas, por eso hasta puse el render render:$.fn.dataTable.render.number(',','.',0,''), luego hice esto String(tamano) sin y con el render, pero todo culmina en el mismo error.
    – abrahamhs
    Commented el 30 oct. 2020 a las 3:35

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.