automatically refresh table via ajax call

buddyglass

First off, let me apologize in advance for being a JS, AJAX, jQuery and DataTables newbie. The bulk of my experience is in server-side Java.

For a hobby project I'd like to develop a tiny web application that provides a pseudo real time view of the contents of a database table. It will talk to a server component (most likely a Java servlet) that will serve up table data as JSON. The client view (i.e. a DataTable) should refresh automatically to reflect new table data without the user having to do anything.

The only UI requirements I have for the client view are that the table be sortable by column, that rows be highlighted on mouse-over, and that rows be color-coded based on data within each row.

With regard to the automatic updating, does DataTables have built in functionality for that sort of thing? If not, any pointers or advice on best practices for that sort of task?

Any good tutorials on how to handle mouse-over row highlighting and/or the data-based color coding? I gather this can be done fairly easily via CSS.

If/when I get this working I'd be happy to contribute it as an example, on the off chance it would be useful to someone else.

allan

fnReloadAjax is a suitable plug-in for reloading data dynamically: http://datatables.net/plug-ins/api#fnReloadAjax . Here is an example showing how DataTables can consume an Ajax data source: http://datatables.net/examples/data_sources/ajax.html .

For mouse over highlighting CSS is the best option:

[code]
tr:hover { background: red; }
[/code]
(you might want to refine that some what ;-) )

For data based colouring, you will need to use a bit of Javascript since logic will be required. Have a look at the jQuery hover function to add and remove classes on mouse over / out: http://api.jquery.com/hover/

CSS highlighting demo: http://datatables.net/examples/advanced_init/highlight.html
jQuery hover demo: http://datatables.net/examples/api/highlight.html

Allan

buddyglass

Thanks Allan. I'm almost done stubbing out the servlet and will start on the js/html soon. Will probably come back with more questions then. Hopefully of a more specific nature.

GregP

Since my application is using server-side processing, I'm relying on fnDraw instead (as recommended by the fnReloadAjax plug-in's description). The way I'm doing this is quite basic, but it works. All I do is setInterval (a core JavaScript function) on a function that does the draw every X seconds.

During development I need to access a static DOM sometimes to tweak CSS, so I've also implemented a pause function. Clicking the button clears the interval (ie. stops the polling), and clicking it again sets it anew.

buddyglass

As far as the redraws go, I was going to handle that as follows:

1. On page load, enter a loop that makes a remote call. Initially, pass a token that indicates the call should not block, but should return whatever the "current" data is immediately.

2. Each time a remote call returns, redraw the table w/ the new data.

3. Subsequent calls (after the first) will block at the server level and only return once new data is available. The new data is returned with a time stamp. This client passes this time stamp back as a parameter to subsequent calls so the server can determine whether its current data is newer than what the client currently has.

Basically that's it. Sound reasonable?

GregP

I was originally planning to use Websockets until most browsers paused support for them, and the "problem" I ran into is that it's the DataTables object itself that's making the remote call. The API certainly permits you to write your own call, but since I abandoned Websockets, I never went any deeper into handling a "call and answer" loop that modified the Ajax request and expected response.

One thing that occurred to me, though, and maybe Allan can check sanity for me on this one... you could always retrieve the data in your own custom function, storing it in a JavaScript array. Then initialize DataTables to build the table based on the array rather than the Ajax request. Your own data interchange method would call over to the dataTable object to redraw.

I'd love to see more input on this one, too. At SOME point websocket support will ramp up again across browsers and we'll want to switch to that method in our application.