Datatable getting distorted after ajax call though axios
Datatable getting distorted after ajax call though axios
pandeysa05
Posts: 5Questions: 1Answers: 0
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
i have a datable which is working fine on page refresh. when i am using it with the ajax it si not working ( prev data still there and pagination did not work )
here is my table
Creation date
Message Text
{% for key, value in data.alerts.items%}
{{value.timestamp}}
{{value.message_text}}
{% endfor %}
Creation date
Message Text
js for table
$("#example1").DataTable({
"responsive": true,
"autoWidth": false,
"ordering": false,
"info": true,
"pageLength": 10,
"bDestroy": true,
"recordsFiltered":10,
"destroy": true,
});
my code for get it updated ( which is getting the tbody of table and updating it )
<script>
var sitename = "{{data.site.name|safe}}"
var avm = document.getElementById("ravm");
var table1 = $('#example1').DataTable();
$('#example1').DataTable().clear().destroy();
// $('#example1').DataTable().row().remove();
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>```
and here is my django template for the tbody
{% 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 %}
```
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
hi thanks, tried to make a test case here
<a class="jsbin-embed" href="http://live.datatables.net/mohohaya/1/embed?html">Demo Server Side Process Datatable</a>
the whole html from trefresh tag is coming from axios call and getting feed to my table
no sorry the test case seems distorted here .. basically i have a tag of tbody of table and then feeding that tag from axios hrml get response .. now when that tag get's data replaced by new html data it loses it's search and pagination.
Looking at the code, it seems the ajax reload is just updating the data in the DOM. DataTables caches all the data, so you would either need to call
rows().invalidate()to refresh the cache, re-initialise the table, or just get DataTables managing the ajax requests.Colin
hi Colin, thank you for your time. may be i am very new and i did not work. may i know if some paid support also for it.
in
<
table>
<tbody id ="dataid">
.......
,....
</tbody>
<
table>
i am just putting a new data ( which is in html format or <tr><td >... from the id = dataid and it distots everything. i tried doing
in the js after adding new data there
dataid.innerHTML = resp.data; ( redp in html format )
but it did not work
This should be
.invalidate('dom')- note the quotes.The best way to move this forward would be to link to your page or to create a test case. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hey coin,
i got the answer from web. posting here with sincere thanks to you if anyone comes searching this.
$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();
and it worked so pretty.
Thanks you so much !