The DataTable is becoming distorted following the Axios get request update

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.

Answer №1

After extensive research, I finally found the solution I was looking for.

 var table = $('#example2').dataTable();
         oSettings = table.fnSettings();

         table.fnClearTable(this);
         table.DataTable().destroy();
         table.find('tbody').append(data.response);
         table.DataTable({
         "responsive": true,
         "autoWidth": false,
         "ordering": false,
         "info": true,
         "pageLength": 10,
         "bDestroy": true,
         "recordsFiltered": 10,
      }).draw();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the Jquery validation plugin for Internet Explorer 9 when the website first loads

Our website is currently using Jquery v1.9.0 and jquery validation plugin v1.10.0. The form on our site consists of two text boxes and a submit button. When the submit button is clicked, the input elements are validated and a JavaScript function is trigger ...

Unable to assign an argument to a function in commander.js

Having some trouble passing an option to a custom command in commander.js... program .command('init [options]') .description('scaffold the project') .option('-b, --build', 'add "build" folder with subfolders') . ...

Guide to converting raw Mysql fields into objects using Node.js

I have written a code to retrieve all the rows from the article table in MySQL, but I would like to represent this data in object and array format so that I can send it to endpoints. app.get('/article' , function(req , res){ var connec ...

Send an array to a function with specified criteria

My current code successfully splits an array, but I need to pass a value when the array condition is met. For example, here is how the value is split into an array: var myArr = val.split(/(\s+)/); If the array in position 2 is empty, I need to use ...

The icon is not being displayed when the onHover event on the Material UI component is triggered

I am currently working on adding a delete icon to a Material UI MenuItem component. I've created a state field within the component's state called isHovering, which is initially set to false. The goal is to display the delete icon when hovering o ...

Add slides in PowerPoint before or after the currently selected slide to enhance your presentation flow

I'm currently working on a function that pulls data from an API to convert PowerPoint presentations into base64 strings. Once I receive the response object, my goal is to seamlessly insert the slides into the existing presentation, exactly after the s ...

An error was encountered: The object 'object object' does not have the 'on' method available

I want to experiment with this website: However, I am encountering an error without any events triggering. I am confused why the method "on" is not being found even on page load. <head> <link href="css/scrollable-horizontal.css" rel="styleshe ...

What is the process for indicating the cache directory in npm5 when using the install command?

When using yarn, you can specify the cache folder with yarn --cache-folder [CACHE_FOLDER]. Is there an npm5 alternative to this? One option is to set the cache folder with a separate command: npm config set cache [CACHE_FOLDER]. However, I'm wonderin ...

Is it possible to switch my form submit to ajax by simply changing the onsubmit action?

There are many tutorials on jquery that teach you how to build a submit form from scratch, which is great. But I'm interested in knowing if it's possible to convert my existing form. Currently, I have a standard form with email and blank value c ...

Troubleshooting multiple element visibility problems with jQuery

Please take a look at the code snippet below. $(document).ready(function(){ $(".like-btn").hover(function() { var rowid = $(this).attr("data-rowid"); $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() { $(".reaction ...

Unusual behavior in a for loop with node.js

Trying out some new things with node.js and running into issues with a basic for loop... for (var i = 0; i < 5; i++); {( console.log(i)) } Can anyone explain why I'm seeing 5 in the console? I was anticipating 0,1,2,3,4... ...

Create a new object in Three.js every x seconds and continuously move each object forward in the Z-axis direction

I am currently developing a Three.js endless runner game where the player controls a character dodging cars on a moving road. At this early stage of development, my main challenge is to make the hero character appear to be moving forward while creating the ...

Utilize the power of jQuery accordion to organize and display your table

Is there a way to integrate jQuery UI Accordion with an HTML table so that columns can be collapsible? I have tried various methods but haven't been successful. Currently, this is what I have implemented: $(".col1, .col2").addClass("hidden"); $(".s ...

Implement the use of NextAuth to save the session during registration by utilizing the email and password

When registering a user using email, password and username and storing in mongodb, I am looking to incorporate Next Auth to store sessions at the time of registration. My goal is to redirect the user in the same way during registration as they would experi ...

bootstrap thumbnail displayed without a border

I have decided to incorporate Bootstrap into my latest project: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS ...

Tips on incorporating CKEditor4 wiris MathML formulas into react JS

I am having trouble displaying MathML in the DOM. When I try to render it, the output is not showing correctly in the Editor. I am utilizing CKEditor4 Let me share the code below to provide more context on what I have attempted so far App.js file: impo ...

Problem with loading CSS and JavaScript files on Node.js server

Recently, I delved into learning Node.js and created a basic server setup like this: // workspace const p = document.querySelector('p'); p.textContent = 'aleluja'; html { font-size: 10px; } body { font-size: 2rem; } <!DOCTYPE ht ...

Displaying a facebox modal window following an asynchronous request

Within the head tags of my HTML page, I have included the necessary code to load the Facebox plugin: <!-- Code for the Facebox plugin setup --> <link href="<?php echo base_url();?>styles/facebox/src/facebox.css" media="screen" rel="styleshe ...

Inability to input text into a textbox with AngularJS

I am currently working on developing an AngularJS app. I have encountered a problem where I am unable to input text into a textbox. The issue lies with my zoomService which handles zoom increments and decrements. While the user can zoom using a slider and ...

What are the steps for updating an NPM package that was installed from a Git repository?

I'm struggling to understand how to update a package that was installed from a git repository. Let's say I have a package located at git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b3bda094b3bda0b8b5b6fab1 ...