Error responsive with sub-datatable
Error responsive with sub-datatable
silens
Posts: 101Questions: 40Answers: 0
I'm doing an example like this, my function is ajax so I can not do a return and I used callback. The problem is that the subtable does not do the responsive.
https://datatables.net/examples/api/row_details.html
This is the subtable
function alb_fact(idFact,callbackFunction) {
var parametros = {
"idFact": idFact,
};
$.ajax({
data: parametros,
url: "php/AgrApp/alb_fact.php",
type: "POST",
beforeSend: function () {
$("#cargando").show();
},
success: function (data) {
objJson = JSON.parse(data);
var tablAlbFact = '<table id="tbl_AlbFact" class="display responsive no-wrap" width="100%" "><thead><tr HEIGHT="3"> <td BGCOLOR="#D0D3D4">Albarán:</td> <td BGCOLOR="#D0D3D4" class = "text-right">Fecha:</td><td BGCOLOR="#D0D3D4">Finca:</td><td BGCOLOR="#D0D3D4" class = "text-right">Kilos:</td><td BGCOLOR="#D0D3D4" class = "text-right">Importe:</td><td BGCOLOR="#D0D3D4" class = "text-right">Dto Com:</td></tr>'
+ '</thead>' + '<tbody>';
$.each(objJson, function (i, item) {
tablAlbFact += '<tr style="cursor: pointer;">' + ' <td>' + objJson[i].nro_ser + '</td><td class = "text-right">' + objJson[i].fch + '</td><td>' + objJson[i].finca_name + '</td><td class = "text-right">' + objJson[i].pso_net_real + '</td><td class = "text-right">' + objJson[i].imp + '</td><td class = "text-right">' + objJson[i].dto_com + '</td></tr>';
});
tablAlbFact += '</tbody></table>' ;
callbackFunction(tablAlbFact);
$(document).ready( function () {
$('#tbl_AlbFact').DataTable({
colReorder: true,
"order": [[1, 'desc']],
/* "columnDefs": [{
"visible": false,
"targets": 5
}],*/
"initComplete": function () {
var api = this.api();
api.$('td').not(":nth-child(3), :nth-child(4), :nth-child(5)").click(function () {
api.search(this.innerHTML).draw();
});
},
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Spanish.json",
},
lengthMenu: [5, 10, 50, 75, 100, 250, 1000],
"autoWidth": false,
"destroy": true,
"processing": true,
"responsive": true,
"paging": true,
"ordering": true,
"info": true,
"details": true,
"searching": true,
"pagingType": "simple",
});
});
$("#cargando").hide();
}
});
}
This is the main table:
function misFacturas(Finicio, Ffin) {//Esta función ejecuta la tabla facturas.
var parametros = {
"Finicio": Finicio,
"Ffin": Ffin,
};
$.fn.dataTable.moment('DD/MM/YYYY');
tblFacturas = $('#tbl_Facturas').DataTable({
colReorder: true,
"order": [[4, 'desc']],
"initComplete": function (settings, json) {
var api = this.api();
api.$('td').not(":nth-child(1), :nth-child(2), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8)").click(function () {
api.search(this.innerHTML).draw();
});
var tblFacturas = $('#tbl_Facturas').DataTable();
var info = tblFacturas.page.info();
var count = info.recordsTotal;
if (count > 999) {
alert("No se mostraran todos los resultados, reduzca su búsqueda");
}
},
"initComplete": function () {
var api = this.api();
api.$('td').not(":nth-child(1), :nth-child(2), :nth-child(5), :nth-child(7), :nth-child(8), :nth-child(6)").click(function () {
api.search(this.innerHTML).draw();
});
},
"footerCallback": function (row, data, start, end, display) {
var api = this.api(),
data;
var intVal = function (i) {
return typeof i === 'string' ? i.replace(/[\€,]|Kg/g, '') * 1 : typeof i === 'number' ? i : 0;
};
total = api.column(8).data().reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
pageTotal = api.column(8, {
page: 'current'
}).data().reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
totalFactura = api.column(6).data().reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
pageTotalFactura = api.column(6, {
page: 'current'
}).data().reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
totalFactura = totalFactura.toFixed(2);
pageTotalFactura = pageTotalFactura.toFixed(2);
pageTotal = pageTotal.toFixed(2);
total = total.toFixed(2);
$('#ResumenF').html(" <h4> <span class='modal-title label label-default'>F.Total: " + totalFactura + " Kg" + " / T. a cobrar: " + total + " €" + "</h4></span>");
$("#fdesdefhastaF").html("<h4> <span class='modal-title label label-default'> Desde: " + $('#idFechaInicioF').val() + " Hasta: " + $('#idFechaFinF').val() + "</span></h4>");
$(api.column(8).footer()).html(pageTotal + '€');
$(api.column(6).footer()).html(pageTotalFactura + '€');
$(api.column(5).footer()).html("Subtotales...");
},
colReorder: true,
stateSave: true,
"autoWidth": false,
"processing": true,
"destroy": "true",
"pagingType": "simple",
"responsive": {
"details": false,
},
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Spanish.json",
},
lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
dom: 'B<"clear">lfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
"ajax": {
"data": parametros,
"url": "php/AgrApp/facturas.php",
"type": "POST",
"dataSrc": "",
},
"columnDefs": [{
"visible": false,
"targets": 0
}, {
className: "dt-body-right",
"targets": [4, 5, 6, 7, 8]
}, ],
"columns": [{
"data": "id",
}, {
"defaultContent": "<button type='button' id=\"idVfactH\" title=\"Ver detalle\" class='albaranes btn btn-primary btn-xs '><span class='glyphicon glyphicon-zoom-in'></span></button>",
"width": "3%",
"responsivePriority": "1"
}, {
"data": "nro_ser",
"responsivePriority": "2"
}, {
"data": 'emp',
render: function (data, type, row) {
emp = devuelveEmpresa(data)
return emp;
}
}, {
"data": "fch",
"responsivePriority": "3"
}, {
"data": "bas"
}, {
"data": "tot_fac_mon",
"responsivePriority": "2"
}, {
"data": "ret_tot"
}, {
"data": "imp_pdt",
"responsivePriority": "4"
}, ]
});
window.onresize = function () {
tblFacturas.columns.adjust().responsive.recalc();
},
$('#tbl_Facturas tbody').off('click', 'button.albaranes');
$('#tbl_Facturas tbody').on('click', 'button.albaranes', function () {
var tr = $(this).closest('tr');
var row = tblFacturas.row( tr );
var open = row.child.isShown();
var idFact = tblFacturas.row($(this).parents("tr")).data();
tblFacturas.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
if (this.child.isShown()) {
this.child.hide();
$(this.node()).removeClass('shown');
}
});
if(!open){
alb_fact(idFact['id'], function (tblAlbFact) {
row.child(tblAlbFact).show(); //Esta escondido, llamo a la función
tr.addClass('shown');
});
}
});
}
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi @silens ,
That's a lot of code - would you be able to link to your page or reproduce on live.datatables.net,
CHeers,
Colin
Hello, yes, I know but right now I can not give access to that web. Basically what I have done is to convert a subtable into datatable, when you click on the button, the subtable appears, my problem is that this subtable is not responsive.
Could you try reproducing something slimmed down on live.datatables.net, that'll give us something to try then,
Cheers,
Colin