I am encountering an issue with my data table while populating the tbody using Axios get call. The pagination does not work properly and sometimes the displayed row count is incorrect. For example, even if the new data only consists of 10 rows, it might show 100 rows instead. I suspect that the data table is not being reinitialized after updating.
Below is the JavaScript code that updates the tbody:
<pre>
<script>
var sitename = "{{data.site.name | safe}}"
var avm = document.getElementById("ravm");
function loadAvm() {
axios.get('ravm', {
params: {
site: sitename
}
}).then(function (resp) {
console.log(resp.data.length);
avm.innerHTML = resp.data;
}).catch(function (err) {
console.log(err)
})
}
setInterval(function () {
loadAvm();
}, 3000);
</script>
</pre>
Here is my Django template:
{% 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 %}
NOTE: Everything functions correctly when I refrain from utilizing the Axios call to update and simply refresh the page to retrieve new data from the view.