A while ago I have been investigating the subject and the truth is that I do not find it back. My idea is, by using the Script Datatable generate a table that the charge by a json , until there we are perfect, the problem arises when I want to update the table by entering a date in input , and that the data shown by a query SQL , are updated to the corresponding date entered manually.
I hope I have been clear and that you can help me! Thanks!
Editing I add part of the code
Code HTML where I generate the table
<table id="example" class="display table table-fixed">
<!-- Creacion de la tabla de Indicadores -->
<thead>
<tr>
<th class="indicador_t" rowspan="2">Indicador</th>
<th rowspan="2">Max/Min/<br>Ran</th>
<th class="acu_mes" colspan="4">Mes actual (Al día)</th>
<th rowspan="2" class="ancho_mes">Meta Mensual</th>
<th class="acu_ejercicio" colspan="3">Acumulado ejercicio (Al día)</th>
<th rowspan="2" class="ancho_anual">Meta Anual</th>
</tr>
<tr>
<th>Real</th>
<th>Area</th>
<th>Meta</th>
<th>Cumplimiento</th>
<th>Real</th>
<th>Meta</th>
<th>Cumplimiento</th>
</tr>
</thead>
</table>
Script where I generate table from Datatable , you will notice that I do a grouping according to a certain group.
$(document).ready(function() {
var datatable = $('#example').DataTable({
"pageLength": 30,
"serverSide": true,
ajax: {
url: 'calculos_indicadores.php',
dataSrc: ''
},
columns: [
{ "data": "nombre",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if (oData.descripcion != null) {
$(nTd).html("<a target='_blank' class='tooltips' href=detalle_indicador.php?id_indicador="+oData.id_indicador+">"+oData.nombre+"<span>"+oData.descripcion+"</span></a>");
}else{
$(nTd).html("<a target='_blank' href=detalle_indicador.php?id_indicador="+oData.id_indicador+">"+oData.nombre+"</a>");
}
}
},
{data:"accion"},
{ "data": "valorActual",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if (oData.origen_de_datos == 'excel' && oData.valorOk == 0 && oData.forma_agregacion != 'proporcion') {
$(nTd).html("<a class='tooltips class_a_href' href='#'><u>"+oData.valorActual+" "+oData.unidad_medida+"</u><span>Última Actualización:"+oData.ultimaActualizacion+"</span></a>");
}else{
$(nTd).html("<a class='tooltips class_a_href' href='#'>"+oData.valorActual+" "+oData.unidad_medida+"<span>Última Actualización:"+oData.ultimaActualizacion+"</span></a>");
}
}
},
{data:"nombre_area"},
{ "data": "valorObjetivoDiario",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if (oData.frecuencia_actualizacion != 'mensual') {
$(nTd).html(oData.valorObjetivoDiario);
}else{
$(nTd).html("-");
}
}
},
{ "data": "variacion",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if (oData.accion != 'Ran') {
if (oData.tiene_alarmas == 't') {
if (oData.accion == 'Max') {
$(nTd).html("<a class='tooltips class_a_href' href='#'>"+oData.variacion+" %<span>Amarillo: "+oData.luzAmarilla+" % || Verde: "+oData.luzVerdeDer+" %</span></a>");
}else if (oData.accion == 'Min'){
$(nTd).html("<a class='tooltips class_a_href' href='#'>"+oData.variacion+" %<span>Amarillo: "+oData.luzAmarillaDer+" % || Verde: "+oData.luzVerdeDer+" %</span></a>");
}
}else{
$(nTd).html(oData.variacion);
}
}else{
if (oData.tiene_alarmas == 't') {
$(nTd).html("<a class='tooltips class_a_href' href='#'>"+oData.variacion+" %<span>Amarillo Inferior: "+oData.luzAmarilla+" % || Rango Verde: "+oData.luzVerde+" % - "+oData.luzVerdeDer+" % || Amarillo Superior: "+oData.luzAmarillaDer+" %</span></a>");
}else{
$(nTd).html(oData.variacion);
}
}
}
},
{data:"valor_objetivo"},
{data:"acumuladoEjericioReal"},
{data:"acumuladoEjericioTotal"},
{data:"desvio",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if (oData.tiene_alarmas == 't') {
$(nTd).html(oData.desvio+" %");
}else{
$(nTd).html(oData.desvio);
}
}
},
{data:"acumuladoEjericioRealTotal"}
],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/* Append the grade to the default row class name */
if ( aData.valor_estado == 1 )
{
$('td:eq(4)', nRow).css('background-color', '#E68282');
$('td:eq(4)', nRow).css('font-weight', 'bold');
}else if (aData.valor_estado == 0.5) {
$('td:eq(4)', nRow).css('background-color', '#FCDF6A');
$('td:eq(4)', nRow).css('font-weight', 'bold');
}else{
$('td:eq(4)', nRow).css('font-weight', 'bold');
}
if (aData.estado_acumulado == 1) {
$('td:eq(8)', nRow).css('background-color', '#E68282');
$('td:eq(8)', nRow).css('font-weight', 'bold');
}else if (aData.estado_acumulado == 0.5) {
$('td:eq(8)', nRow).css('background-color', '#FCDF6A');
$('td:eq(8)', nRow).css('font-weight', 'bold');
}else{
$('td:eq(8)', nRow).css('font-weight', 'bold');
}
},
"columnDefs": [
{ "visible": false, "targets": 3},
{"targets": [ 1,2,3,4,5,6,7,8,9,10 ], "className": "text-center"}
],
"language": {"sSearch": "Buscar : "},
"order": [[ 3, 'asc' ]],
"displayLength": 300,
"paging": false,
"info": false,
"scrollY": "500px",
"scrollCollapse": true,
"paging": false,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(3, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="10" style="font-weight: bold;">'+group+'</td></tr>'
);
last = group;
}
} );
}
} );
// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 3 && currentOrder[1] === 'asc' ) {
table.order( [ 3, 'desc' ] ).draw();
}
else {
table.order( [ 2, 'asc' ] ).draw();
}
} );
} );
Up to here everything is perfect , now my idea is to add from the previous script that by selecting some field, which can be a date in a input , update the table with the data of the new query from the date that is passed.
And I looked for many examples and researched but I could not find the solution to this problem.