How to refresh table data in real time automatically

Patrycja

Hi, I have problem with java app. I have the table which pulling the data from the database and it is a thymeleaf framework. I'm using datatables framework to sort and filter the data. I want to get the data automatically from database without clicking refresh button when new data is comming. How should I do that?

bindrid

You cannot push data to the client, ever. Servers responds to requests from the client.

If it is actually critical to do this update, you need to timestamp or otherwise identify the last time data was added to the database.

Then, use setInterval and ajax to pass this timestamp to the server. If they timestamp does not match, return the new data and reload your table.

Note: this has side effects like not letting the serverside session die until the browser is closed or added traffic to the server.

acquarrio

How we can indentify timestamp? Do you have any examples? Maybe you can change the thymeleaf framework for angularJS and it will be better option to create filter table than DataTables framework?

allan

You could use a WebSocket. Use the row.add(), row().data() and row().remove() methods of DataTables to add, update and remove rows as required by the information sent from the server-side.

Allan

bindrid

It does not matter what framework or plugin you are using. Clients pull data, servers never push data.

How much work do you want to do to make this happen? How much data are you dealing with?

How disruptive to the user would this be?

If you have a few rows and no paging, I would just refresh the entire table using the setInterval function to call the ajax to get all of the current data.

If you are dealing with lots of data, your database should have a last updated column in your database table. If that is the case, use the max date as your timestamp and pass that back in your ajax call (again, triggered by setInverval) and get anything greater than that max date.

I can create a client side example tonight if you need it.

acquarrio

Thank you for your help guys. I will give you my real example and maybe it will be better to understand each other. I tried to use setinterval and ajax but it doesn't work..maybe I something done wrong..
I attached the photo of my table (it is only a small part of my all app)

It is a thymeleaf framework for my table with some elements of DataTable and java helped to read data from database. I have the url adress to localhost link where data is saving. The data is coming to database every now and then and I would like to display only new changes without reload all page.
First I have done to reload all page but its is not usefull when I want to search some elements from the search input because this was refreshing all the time..

 $(document).ready(function(){
        $('#myTable').DataTable({
            "paging":false
    });
    });
    setTimeout(function() {
    location.reload();
    }, 3000); 

bindrid

shoot. forgot about web sockets

acquarrio

any ideas?

allan

That's not real time - that's polling. Which is perfectly valid. Rather than reloading the web-page every 3 seconds, I would suggest you Ajax load the data for the table and then use ajax.reload().

Allan

acquarrio

I tried to use this code but something is wrong:

    var table = $('#myTable').DataTable({
    ajax: {
        url: 'http://localhost:8091/xxx'    <-- I have only adress url where data is saving
    }
    });
    setInterval(function() {
    table.ajax.reload();
    }, 3000 );

allan

What is going wrong? A JS error, or an alert, or rendering, or something else?

adzham

hi. i have similar problem. how can i iterate column data within 5 seconds? im new with datatable. i want to change data for column 'Destination'. thanks in advance if anyone could help me.