hi,
can anyone suggest how can i get the data refresh in datatable with django
axios . here is my code . when the div get new html from the refresh it
loses it's pagination and search feature :(
load_alerts.html
```
{% for key, value in data.alerts.items%}
<tr>
<td class="text-{{value.severity}}">{{value.timestamp}}</td>
<td class="text-{{value.severity}}">{{value.message_text}}
</td>
</tr>
{% endfor %}
js code
<script>
var sitename = "{{data.site.name|safe}}"
var avm = document.getElementById("ravm");
$('#example1').DataTable().clear().destroy();
// $('#example1').DataTable().row().remove();
var table1 = $('#example1').DataTable({
"responsive": true,
"autoWidth": false,
"ordering": false,
"info": true,
"pageLength": 10,
});
function loadAvm() {
axios.get('ravm', {
params: {
site: sitename
}
}).then(function (resp) {
console.log(resp.data.length);
avm.innerHTML = resp.data;
//console.log(resp.data);
}).catch(function (err) {
console.log(err)
})
}
setInterval(function () {
loadAvm();
}, 3000);
</script>
actual div
<div class="card border border-dark ">
<div class="card-header border-0">
<h3 class="card-title">
<i class="fas fa-bell fa-2x mr-1"></i>
<a href="{% url 'alerts' site=data.site.name %}">
Notifications </i></a>
</h3>
<!-- card tools -->
<div class="card-tools">
<button type="button" class="btn btn-tool"
data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool"
data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<div class="card-body">
<table id="example1"
class=
"table table-hover table-bordered table-wrapper-scroll-y my-custom-scrollbar "
cellspacing="0">
<colgroup>
<col span="1" style="width: 25%;">
<col span="1" style="width: 75%;">
</colgroup>
<thead>
<tr class="bg-dark">
<th>Creation date </th>
<th>Message Text</th>
</tr>
</thead>
<tbody id="ravm">
{% for key, value in data.alerts.items%}
<tr>
<td class="text-{{value.severity}}">{{value.
timestamp}}</td>
<td class="text-{{value.severity}}">{{value.
message_text}}
</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr class="bg-dark">
<th>Creation date </th>
<th>Message Text</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.card-body-->
<div class="card-footer bg-transparent">
<!-- /.row -->
</div>
</div>
datatable params
<script>
$(function () {
$("#example1").DataTable({
"responsive": true,
"autoWidth": false,
"ordering": false,
//"bServerSide":true,
"info": true,
"pageLength": 10,
"bDestroy": true,
"recordsFiltered": 10,
"destroy": true,
});
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": false,
"info": true,
"autoWidth": false,
"responsive": true,
});
});
</script>
Thanks & Regards
Saurabh Pandey
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/CAAkjas113tMMpvh0KM_O%2BVwGP6EBQ9_p9S0UzmeVV_JrFFOc8w%40mail.gmail.com.
