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.
!!
, no seria solo uno???