I'm here with the mission of modifying the values of a DATATABLE by clicking on a button created in the html with help also of bootstrap (possibly not has to see but at least to have it under consideration).
I'm working with python and django. When rendering the html then go to the required url, a datatable is loaded in it. The code in html is:
<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>
The tfoot tag I use to filter in each column individually.
To give you this extra modification, I used a 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();
}
} );
} );
} );
When the html is already being visualized, and the datatable wants to be modified, I use a select and a button for it. From the selection I choose the necessary and I make the modification with the help of a jquery. The following:
<script>
$(document).ready(function() {
$("#boton").click(function () {
... //mas codigo
table = $('#tabla1').DataTable();
table.destroy();
table = $('#tabla1').DataTable({"ajax": '{{ URL_TMP_AJAX }}data.txt'});
});
})
</script>
Basically what I do is call a file (data.txt) with the following format:
{"data":[["datoA1","datoA2","datoA3","datoA4","datoA5","datoA6","datoA7" ] ,..... ]}
and apparently if you change the table but if you perform any action on it, go back to the previous data.
In case you are doing something wrong, what would be the fault? and in case of having a way that from a jquery can modify the values of the datatable, what would it be?.
Greetings!