Updating table using jsquery array
Updating table using jsquery array
Chazza
Posts: 10Questions: 4Answers: 0
Hi
I am new to DataTables so please bear with me. I have a table on a web page which is defined in the <head> statement and is
<script>
var dataSet = %ALARMSTABLE%;
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "id" },
{ title: "time" },
{ title: "z1" },
{ title: "z2" },
{ title: "z3" },
{ title: "z4" },
{ title: "z5" },
{ title: "z6" },
{ title: "z7" },
{ title: "z8" }
]
} );
} );
</script>
Then in the <body> I have
<table id="example" class="display" width="100%"></table>
When I load or refresh the page the table always displays the correct latest data so up to this point it is all okay.
I have added a button so I don't have to reload the whole page to get the latest data. The script for that is;
<script>
$('#butupdt').on('click', function () {
$.get( "alupdate", function(latestdata) {
alert(latestdata); //shows data received to verify correct format
var table = $('#example').DataTable();
table.clear();
table.rows.add(latestdata);
table.draw();
});
});
</script>
When I click the button the alert pops up and shows me the data held in the variable latestdata is in the correct format which is a simple array table. An example of the output of the alert is;
[
["6","Sun 22:12","1","0","1","0","1","0","0","0"],
["7","Tue 16:50","1","1","0","1","0","0","0","1"],
["4","Sat 05:15","1","1","1","1","0","1","1","0"],
["8","Sat 13:23","1","0","0","0","1","1","0","1"],
]
This exactly in the format that is sent when the page loads or refreshes so that would seem to be okay. When I click okay on the alert the lots of rows are added and I cannot see any meaningful data. It seems a row is added for every character in the string held by the latestdata. Please note I would like to keep this as simple as possible for now without json or ajax. The webserver is running on an ESP32 microcontroller that is generates the data for latestedata.
I am sure I need to add more than table.rows.add(latestdata) but am completely stuck for how to get the latestdata into the rows correctly. Any help would be greatly appreciated.
Thank you
Chazza
This question has an accepted answers - jump to answer
Answers
Yep, the data is ok, see it works fine here: http://live.datatables.net/fahefuna/1/edit
It may need a JSON.stringify() perhaps, but if that doesn't help, we would need a link to your page to see the issue,
Colin
Hi Colin
Many thank you for the quick reply and running up the example.
I think the issue is that the incoming latestest data is treated as a string where as the one you have typed out as an array is correctly treated as an array.
If the alert line is uncommented I have noticed that it shows the incoming array complete with square brackets. If the typed out latestdata is used the alert strips out the square brackets so it must be treating it differently. I guess it then sees it as a genuine array rather just a long string.
I have tried sending the data without the square brackets but the errors still persist. I could do with finding out how to parse the incoming data into an array. I can send the data as csv or as I have already described. I would prefer csv as it would cut down the payload to send. Though this is not really an issue.
I am doing this on an ESP32 microcontroller and everything including the webserver is running on it. My finished product will not be able to use online servers, instead having to rely on having everything on board.
If there any pointers in how to parse the incoming data into an array that would be much appreciated
All the best
Chazza
I think Colin meant for you to try JSON.parse() to convert it form a JSON string to a Javascript object that you can then use
rows.add()with.Kevin
Hi Kevin
Thank you for that. Any example please of how I would use json.parse() to correctly format the incoming string into an array please?
Regards
Charin
Take a look at the docs in the link for examples. Try
latestdata = JSON.parse(latestdata);before therows.add().Kevin
Hi Kevin, Colin
Just wanted to say thank you for your help. I have this working now. Ended up using JSON.parse() as suggessted and changed all the ' into " in the array and it worked fine.
All the best
Charin