Problem to get datatable data with new column with null value
Problem to get datatable data with new column with null value
CValle
Posts: 2Questions: 2Answers: 0
Hi!
I have declared a datatable with a series of buttons. One of them gets all the data from the table, opens a modal and paints a new table, with new columns without a data source. When modifying the information in the table and wanting to get all the data from it, I can't, I get the data from the previous table.
The data that I also need to get is in the column that has an html input and the one marked as //Colabordores with js data:null
The 'Actualizar' button gets all the data to paint on the new table.
Original Table:
var TablaAsign = $('#tbl_asign').DataTable({
language: { "url": "./dt_spanish.json" },
processing: true,
destroy: true,
data: datos1,
dom:
"<'row'<'col-sm-12 col-md-6'B><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-12'p>>",
select: {
style: 'multi',
},
buttons: {
buttons: [
{
text: '<i class="fas fa-check-square"></i>',
titleAttr: 'Seleccionar Todo',
className: "btn-outline-success",
action: function () {
TablaAsign.rows({ search: 'applied' }).select();
}
},
{
text: '<i class="fas fa-minus-square"></i>',
titleAttr: 'Eliminar selección',
className: "btn-outline-danger",
action: function () {
TablaAsign.rows().deselect();
}
},
{
text: '<i class="fas fa-user-minus"></i> Desasignar selección',
titleAttr: 'Desasignar selección',
enabled: false,
className: "btn-outline-warning",
action:
function () {
if (TablaAsign.rows('.selected').data().length > 0) {
DesasignarEnsayos_Tecnicas();
TablaAsign.rows().deselect();
} else {
swal("Tienes que seleccionar al menos una fila", "", "warning");
}
}
},
{
text: '<div data-toggle="modal" data-target="#update"><i class="fas fa-cloud-upload-alt"></i> Actualizar</div>',
titleAttr: 'Actualizar',
className: "btn-outline-primary",
action:
function () {
datosSubir = TablaAsign.rows().data();
TablaComent.clear();
TablaComent.rows.add(datosSubir).data();
TablaComent.draw();
}
}
],
dom: {
button: {
className: 'btn btn-sm mb-2'
},
container: {
tag: 'div',
className: 'flexcontent d-flex justify-content-around'
},
buttonLiner: {
tag: null
}
}
},
columnDefs: [
{
targets: [6,7,8,9],
visible: false,
}
],
columns: [
{
data: null,
render: function (data, type, row, meta) {
return '<button class="btn btn-outline-warning btn-sm deltest" type = "button"><i class="fas fa-user-minus fa-sm"></i></button>';
}
},
{
data: 'icono',
render: function (data, type, row, meta) {
return '<img src="' + data + '" width="16px" data-toggle="tooltip" title="' + row['Tecnica'] + '" />'
}
},
{
data: 'NombreLote',
render: function (data, type, row, meta) {
return data + '<br><font class="text-muted small">' + row['NumLote'] + '</font>';
}
},
{
data: 'Producto'
},
{
data: 'reportedName',
render: function (data, type, row, meta) {
return capitalizarPalabras(data);
}
},
{
data: 'Analista'
},
{ data: 'NumLote' },
{ data: 'NombreLote' },
{ data: 'Muestra' },
{ data: 'Tecnica' }
],
});
New table:
var TablaComent = $('#coment').DataTable({
language: { "url": "./dt_spanish.json" },
processing: true,
destroy: true,
data: datosSubir,
dom:
"<'row'<'col-sm-12 col-md-6'B><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-12'p>>",
select: {
style: 'multi',
},
columns: [
{ data: 'Analista'},
{ data: 'Muestra'},
{
data: 'NombreLote',
render: function (data, type, row) {
return data + '<br /><font class="text-muted small">' + row['NumLote'] + '</font>';
}
},
{
data: 'reportedName',
render: function (data, type, row) {
return capitalizarPalabras(data);
}
},
{
data: 'Producto'
},
{
render: function (data, type, row) {
return '<input class="form-control trackInput" type="text" placeholder="Comentario..."></input>';
}
},
{ data: 'Analista'},//Assigned_Operator
{
data: null,
//Colaboradores
},
{ data: 'Tecnica'},//Técnica
{ data: 'reportedName'}//Análisis
],
columnDefs: [
{
visible: false,
targets: [6, 7, 8, 9]
}
],
buttons: {
buttons: [
{
"text": '<i class="fas fa-check-square"></i>',
"titleAttr": 'Seleccionar Todo',
"className": "btn-outline-success",
"action": function () {
//seleccionamos solo lo filtrado, si lo hubiese
TablaComent.rows({ search: 'applied' }).select();
}
},
{
"text": '<i class="fas fa-minus-square"></i>',
"titleAttr": 'Eliminar selección',
"className": "btn-outline-danger",
"action": function () {
TablaComent.rows().deselect();
}
},
],
dom: {
button: {
className: 'btn btn-sm mb-2'
},
container: {
tag: 'div',
className: 'flexcontent d-flex justify-content-around'
},
buttonLiner: {
tag: null
}
}
},
drawCallback: function (settings) {
$(".trackInput").on("change", function () {
var $row = $(this).parents("tr");
var rowData = TableComent.row($row).data();
rowData.MarkupValue = $(this).val();
})
}
});
when executing the code
$('#coment').DataTable().rows().data()
I get the following result:
0:
Analisis: "DISS_DATA_UV"
Analista: "XXXXX"
Muestra: 131760
NombreLote: "MP190257"
NumLote: 70932
Producto: "8-OME_E"
Replicas: 6
Tecnica: "PARTICULAS"
icono: "/img/icons/particulas.svg"
reportedName: "DISOLUCIÓN"
[[Prototype]]: Object
Can somebody help me?
Thanks!
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin