Estoy haciendo una tabla con jquery datatables, la cual requiere el usuario pueda ordenar las filas ingresadas. Este es el html:
<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>
Y tengo el siguiente código jquery para crear la tabla:
let columnasImagenes=[
{"data":"DT_RowId",className:"reorder"},
{"data":"tamano",class:"text-right",render:$.fn.dataTable.render.number(',','.',0,'')},
{"data":"nombre",class:"left"}
];
let columnasDefsImagenes=[
{"targets": "_all", className: "dt-head-center"/*, orderable: false*/},//todas las columnas
{"targets": 0, "title": "Orden"/*,orderable: true,className:"reorder"*/},
{"targets": 1, "title": "Tamaño"},
{"targets": 2, "title": "Archivo"}
];
funcionAlCompletarImg=function(setting,json,datosJson){
let tablaImg = $("#mTabla-imagenes").DataTable();
console.log(json);
$("#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();
}
} );
};
$("#btnAgregarArchivoImg").on("change", function(){
let archivo=$("#btnAgregarArchivoImg").prop("files")[0];
if(!(archivo==""||archivo==null||archivo==undefined)){
contador_mTablaImagenes++;
let tablaImg = $("#mTabla-imagenes").DataTable();
let tamano=archivo["size"];
let nombre=archivo["name"];
tablaImg.row.add({"DT_RowId": contador_mTablaImagenes,"tamano":tamano,"nombre":nombre,"archivo":archivo}).draw(false);
}
});
creaTablaReorder("#mTabla-imagenes",null,columnasImagenes,columnasDefsImagenes,lenguajeGeneralDataTable,funcionAlCompletarImg,"DT_RowId");
Me he basado en este ejemplo de inicialización básica de RowReorder. Estoy usando la versión RowReorder 1.2.7, de datatables es la versión DataTables 1.10.21 y de jquery es la versión jQuery v3.5.1.
Se supone que debería funcionar solo agregando rowReorder: true
asi que eso hice en mi función:
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": {
//"selector": "tr",
"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);
}
Al principio no tenia la columna order y si intercambiaba la fila pero solo en la 1er columna. Luego leí que se requería que la 1er columna fuera un pivote consecutivo para que intercambiara todo el row, así que lo hice. Pero aunque parece que intercambia la fila esta se regresa inmediatamente la soltarla. Luego encontré esta pregunta. Ahí, parece que si hubo un problema con el plugin, pero al parece ya esta bien. Entonces no se si yo estoy haciendo algo mal. ¿Alguien me puede decir como hacer que el RowReorder funcione? Tambien he probado con las opciones comentadas como en columnasDefs
las partes que dicen orderable
y en la definición del datatable
"rowReorder": {
//"selector": "tr",
"dataSrc": columnaReorder,
}
pero nada me ha funcionado. ¿Alguien sabe otra manera de subir y bajar filas de un datatable?¿Tal vez con botones up and down en vez del drag an drop?
null
comodata
? He revisado y todo parece estar bien a excepción de lo que te acabo de preguntar.