Estoy con la misión de modificar los valores de un DATATABLE al dar click en un botón creado en el html con ayuda también de bootstrap (posiblemente no tiene que ver pero almenos para tenerlo a consideración).
Estoy trabajando con python y django. Al renderizar el html luego ir al url necesario, se carga en éste un datatable. El código en html es:
<table id = "tabla1" data-toggle="table" class="table table-bordered table-hover tablaConFiltros">
<thead>
<tr>
<th>Indice</th>
<th>Lugar</th>
<th>Ciudad</th>
<th>Latitud</th>
<th>Longitud</th>
<th>Region</th>
<th>Zona</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Indice</th>
<th>Lugar</th>
<th>Ciudad</th>
<th>Latitud</th>
<th>Longitud</th>
<th>Region</th>
<th>Zona</th>
</tr>
</tfoot>
<tbody>
{% for item in lst_data %}
<tr>
<td>{{ item.0 }}</td>
<td>{{ item.1 }}</td>
<td>{{ item.2 }}</td>
<td>{{ item.3 }}</td>
<td>{{ item.4 }}</td>
<td>{{ item.5 }}</td>
<td>{{ item.6 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
La etiqueta tfoot la uso para filtrar en cada columna individualmente.
Para darle este modificación extra, usé un java script:
$(document).ready(function() {
//esconder control buscar generico
// Setup - add a text input to each footer cell
$('.tablaConFiltros tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="filter by '+title+'" />' ); //se aprecia los footer para filtrar
} );
// DataTable
var table = $('#tabla1').DataTable({
"dom": '<"top"l>rt<"bottom"ip><"clear">' //hide upper search box
});
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that.search( this.value ).draw();
}
} );
} );
} );
Cuando ya el html esta siendo visualizado, y el datatable quiere ser modificado, uso un select y un boton para ello. Del select escojo lo necesario y hago la modificación con ayuda de un jquery. El siguiente:
<script>
$(document).ready(function() {
$("#boton").click(function () {
... //mas codigo
table = $('#tabla1').DataTable();
table.destroy();
table = $('#tabla1').DataTable({"ajax": '{{ URL_TMP_AJAX }}data.txt'});
});
})
</script>
Básicamente lo que hago es llamar a un archivo(data.txt) con el siguiente formato:
{"data":[["datoA1","datoA2","datoA3","datoA4","datoA5","datoA6","datoA7" ] ,..... ]}
y al parecer si cambia la tabla pero si realizo cualquier acción sobre ella, vuelve a los datos anteriores.
En caso de que este realizando algo mal, Cual sería la falla? y en caso de tener una manera que desde un jquery pueda modificar los valores del datatable, Cual sería?.
Saludos!