data table refresh with Django

107 views

Skip to first unread message

Saurabh Pandey

unread,

Nov 5, 2020, 12:53:59 AM11/5/20

to django...@googlegroups.com

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>