Datatable getting distorted after ajax call though axios

Datatable getting distorted after ajax call though axios

pandeysa05pandeysa05 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

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • pandeysa05pandeysa05 Posts: 5Questions: 1Answers: 0

    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

  • pandeysa05pandeysa05 Posts: 5Questions: 1Answers: 0

    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.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • pandeysa05pandeysa05 Posts: 5Questions: 1Answers: 0
    edited November 2020

    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

           var table = $('#example1').DataTable(  );
             table
        .rows()
        .invalidate(dom)
        .draw();
    

    in the js after adding new data there
    dataid.innerHTML = resp.data; ( redp in html format )

    but it did not work :(

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    edited November 2020 Answer ✓

    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

  • pandeysa05pandeysa05 Posts: 5Questions: 1Answers: 0

    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 !

This discussion has been closed.