Realtime data and tables
Realtime data and tables
sergas
Posts: 4Questions: 1Answers: 0
Hi!
I am doing realtime live table with additional data on page. Can you help me with code for updating data. Your example on datatables website for stock data don't show how to make it realtime and refresh data, so I decided to get data from json file which is generated each 5 second, may be it's not good but simple idea. Now I have problems I don't know how to solve:
1 'Loading' message on table update, each time I get data. Is it possible to remove it, i used trick in language translation to pmake it empty
2 I need to update some data on page outside table, I don't know how to pass it from json. What way to do this will be the best?
I am trying to use two json data files using 'setInterval', but it's not good, can I pass different data from json for table and for other valuse on page?
Any help would be very much appreciated.
thanks
$(document).ready(function () {
let table = $('#example').DataTable({
language: {url: 'static/ru.json'},
pageLength: 10,
fixedHeader: true,
scrollX: true,
scrollY: '50vh',
scrollCollapse: false,
searching: false,
paging: false,
processing: true,
serverside: false,
"ajax": {
"url": "datafile.txt",
"dataSrc": ""
},
"columns": [
{"data": "Symbol", "searchable": "false"},
{"data": "Size", "searchable": "false"},
{"data": "Size1", "searchable": "false"},
{"data": "FundingRate", "searchable": "false"},
{"data": "diff", "searchable": "false"},
],
columnDefs: [
{'visible': false,
'targets': [2]},
{
targets: [1, 2],
render: function (data, type, row) {
let color = 'black';
let size1 = row['Size1'];
if (size1 < 0) {
color = 'red';
}
return '<span style="color:' + color + '">' + data + '</span>';
}
}]
});
});
setInterval(function () {
$('#example').DataTable().ajax.reload();
}, 5000);
setInterval( function () {
$.ajax ({
"url": "datafile1.txt",
"dataSrc": "",
success: function(result) {
document.getElementById('p1').innerHTML = result['p1'];
document.getElementById('p2').innerHTML = result['p2'];
console.log(result);
},
})
}, 5000);
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<script type="text/javascript" src="/static/js/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="/static/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/nev-style.css"/>
<style>
td.highlight {
font-weight: bold;
color: red;
}
.main-wrap {
display: flex;
margin: auto;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="main">
<div class="main-wrap">
<div id="p1"></div>
<div id="p2"></div>
</div>
<hr>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Symbol</th>
<th>Size</th>
<th>Size1</th>
<th>Funding</th>
<th>Difference</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript" src="/static/js/nev-datatable.js"></script>
</body>
</html>
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Answers
Do you get errors in the browser's console?
Not sure what you mean. You can use
-ajax.json()to get the latest JSON response. If this doesn't answer your question please provide more details.The code in line 50 - 60 doesn't involve Datatables. Please proivde more details of the issue - do you get errors?
You should be able to do what you want but I'm not clear on what you are asking. Please provide more details.
There is noting obviously wrong with the code in lines 46-48. Please provide a link to your page or a test case replicating the issues so we can help debug.
Kevin
Thank you Kevin for fast reply!
You can check current test version here
85.192.41.18:5000/
now it's other version of code using flask backend, but I will go to other version.
In short I want to make realtime updates in table and some valuse outside table, do you have an example ? What the best way to pass data from backend and how to pass data which is not in table and will be also updated in realtime. Also how to avoid reload data when I make sorting, becose it takes time to read data ?
thank you
It looks like your test case is updating the table. Is there an issue with the updates?
You have server side processing enabled. Do you need server side processing? See the Server Side Processing docs for more info. If you turn off server side processing then the sorting will be performed client side.
Kevin
I don't know how to pass data which is outside table using datatbles json request, do you have an example ? I need to pass data to html data from json, i think it should be function wich is processing json data.
You re referring to this code?
It seems to work. Your data is always the same value so it doesn't look like it changes. Datatables is not involved with this. Stack Overflow is a good resource for general Javascript questions.
Kevin
If I will use this code example, how can I extract variables from it that I will use not in the table, but to display data separately from the table
You mean how to get the JSON data? You can use the
ajax.json()method to get the original JSON object returned from the server. Or you could userows().data()to get the data for specific rows.Allan