AJAX whole table
AJAX whole table
I have a table on my applications that can be used to monitor any active sessions with your username. The sessions are kept in a database table, so its just a simple query. You can expand the rows to view the activity thats going on with that session as well (Which is: https://www.datatables.net/examples/api/row_details.html)
Currently, when you click the ( + ) button to expand the row, it will pull any activity for that session via an ajax query, so thats "live" in the fact its re-queried every time you expand the row, I might make it so it updates itself though.
The question I had was, can I have the entire table update via ajax somehow? Without effecting any expanded rows or table searches/filters? Meaning if you are viewing the table, and someone logs in with your username, currently you have to refresh the page to see it, is there a way to have DataTables just automatically update the table? As well as delete rows for the sessions that are no longer found?
Also, if possible, I wanted to have it so if you have a session expanded to view the detail, and that session ends, instead of deleting the row (and its sub-rows (which is a table)), can I just do something else with it? (Ill just have it grey out and show an alert that the session is over or something)
Thanks!
This question has an accepted answers - jump to answer
Answers
The answer is yes. You can structure a query and structure the update to dataTables to only affect rows that have changed. You can even change the row color and let a jquery animation return to it's normal background color so a user knows which rows have been updated.
How do it, I'm sure, has dozens of answers.
I would not, however, know how to have dataTables do this all by itself.
I happen to have many tables that are constantly being updated and refreshed. Only rows that change are being updated.
After a table is loaded, I include a setTimeout function to call an ajax method every defined period. Some periods are 50 mS, some are 10 seconds. The query in the ajax looks at when the table row was last updated and pulls back only those rows whose date time are greater than the last time stamp or sometimes only rows that changed in the past couple of seconds.
My dataTable routine is smart enough to first check if the current table has the database object id (the primary key value or similar as the row id in the table). It either performs a data(d).draw to update the row or a table.row.add to insert a new row. The data formats are completely different! I include an animated class with a 2 second fade so the user sees the row, and then the background color fades away to the color of the rest of the table.
Finally, the ajax then writes the setTimeout again to cause the next update to happen. If the user change pages, the setTimeout is not fired again.
So you use timestamps to see what was updated?
How about, instead of that, cache the JSON content of the ajax'd data source, and every N seconds/minutes, check if the new JSON content is different, if so, just loop through the JSON array, if the row is different, then do an update.
That sounds like a doable solution, I was just wondering if DataTables already had a built in feature for this.
From another thread, I was wondering if the
row().invalidate()
could be used to easily do it. From what I understand, therow().invalidate()
will set the content back to the "default" content that DataTables cached, so I was thinking just if the row is different, reset the DataTables datasource (somehow), then "invalidate" that row using the invalidate API