*New Plugin* Live Ajax

jLinux

DataTables - Live Ajax

Description: Monitor the AJAX data source every 5 seconds (default), comparing the current data structure and the data structure just pulled. If the DataTables setting rowId is not specified, then the entire table will be reloaded (via ajax.reload()) whenever any changes are detected. If rowId is specified, then liveAjax will update only the necessary rows, this is more resourceful than the former option, especially on massively large data structures, where serverSide should be used, but isn't.

LiveAjax also has 2 optional parameters, one to specify the update interval (in milliseconds), and another to pause updates, which is useful for when there are certain actions being executed, which would be hindered if the table was updated.

All of the DataTables AJAX settings are compatible with this plugin (ajax.type, ajax.data, ajax.dataSrc, ajax.url)

• Git Repo
• Demos
• Blog post

El_Matella

Waouw! Huge work, thanks a lot! I am going to try it!

jLinux

haha, awesome. Let me know if you get any bugs or anything, ill fix them asap. I literally created this in 4 hours, probably less, so im sure theres bugs.

I plan on having this work with JSON too, and just have it monitor a local JS Object, but I dont think thats in high demand at all

@allan if you see any room for improvement, or any ideas, let me know!

jLinux

@El_Matella - I created 2 others btw, lol. Listed in here: http://datatables.net/forums/discussion/31241/plug-in-suggestions

glenderson

I do the same sort of thing, but not through a plug in.

What I my users found helpful was to "flash" the data rows that are changing. Perhaps you already have that but I didn't see it in the demo I checked out.

The basic concept is to change the background, say to a light blue or light green, and then fade back to the original row color in 1-2 seconds. That way your attention is drawn directly to the data that as changed.

jLinux

@El_Matella & @allan, wanted to get your opinion on something..

Do you think its good to have the liveAjax as its own init option for DT? Like so:

$('#example').DataTable({
    ajax: {
        url: 'dataSrc.php'
    },
    rowId: 'emp_id',
    liveAjax: {
        interval: 4500
    }
});

Or do you think it might be better if I just allow the options to be included within ajax? Example:

// Enable liveAjax (basic init)
$('#example').DataTable({
    ajax: {
        url: 'dataSrc.php',
        liveAjax: true,
        interval: 4500
    },
    rowId: 'emp_id'
});

Kind of as a way to ensure that its an ajax source table..

I might alter this so it can check local JSON objects too, and auto update the table with that... if you think thats a good idea. So with that in mind, maybe I should leave it like it is, or maybe I could do either.. lmk whatcha think

jLinux

@allan wanted to get another opinion...

Lets say the user has like... 900,000 rows, (which they should be using serverSide, but aren't), do you think its faster to either..

1. process the new data against the old data, load up an array with the creates/deletes, then pass them as arrays to rows().remove() and rows().add()
2. Use a ES6 Generator when processing the new data against the old data, and as each record is processed, instead of adding it to an object and returning the object, yield the result to be processed via row().remove() and row().add() on each individual record?
3. Make it an option?

My thinking is.. if theres SOOO many records that will be pulled, storing them all in an array to be parsed might take too much time and resources, it might be best to just yield the results one by one, and parse them one by one.. Unless you think that thats worse (due to so many API calls to DT) or that its really no different at all..

Thanks!

jLinux

@allan, if rowId isn't specified, would there be a way to correlate the rows from the new AJAX response with the data currently with in DataTables? I doubt it, but just thought id give it a shot.

@El_Matella You wanted this to update only the rows that need updating, so unless allan has an answer to the above question (which I don't think so), then make sure you specify rowId, if you don't, then just ajax.reload() will be called, updating the entire table (In this update)

allan

It doesn't need to be rowId specifically, but there does need to be some way to uniquely identify the row from the data. rowId is DataTables method of doing that and I'd suggest using that. If it hasn't been defined, and there is no other method used to tell you which data property contains the identifying data, then there is no way to be able to do that.

Regarding the Generator and other options, I'm really not sure what would be faster. I suspect it might be fastest to get the array of ids for the current table, the array of ids from the new data and then basically do a diff. That wouldn't account for changes in data though - at that point you would have no option but to check each row individually to see if it has changed (unless the server gives you that information).

Allan

jLinux

@El_Matella - Just pushed up a new update! - https://github.com/jhyland87/DataTables-Live-Ajax/commit/90a343a3b746a9c3c096a604f8d1265861809709

• Fixed a bug with the destroy event
• Added some more init settings
• Added some events
• Added some API calls (Pause, Resume, Reload, Clear, Change Interval)

jLinux

What I my users found helpful was to "flash" the data rows that are changing. Perhaps you already have that but I didn't see it in the demo I checked out.

The basic concept is to change the background, say to a light blue or light green, and then fade back to the original row color in 1-2 seconds. That way your attention is drawn directly to the data that as changed.

I actually really like that idea, I would love to have some effect on the rows like fade In/Out for rows that are added/deleted as well, but in a post to another thread, @allan said its not possible to accomplish that. Id like to find a way to do it though, even if its via creating a new plugin :-D Since right now, deleted rows just disappear, I don't think it would look good if they were "flashed" a color, then just removed.. would look better if they turned red then faded out.

P.S. Added some updates! Added a lot of events and API Methods, check out the example

jLinux

@allan, I thought you said it wasnt possible to have jquery effects on DT rows?

http://live.datatables.net/xelivalo/1/edit?js,output

allan

You can have some effects - Editor uses a flash when a row is added or updated for example. What is difficult with rows is animation of height. Again possible, but it can be a bit messy.

Allan

jLinux

Flash would be fine... And color fading. WHats the easiest way to accomplish that?

allan

If plain Javascript you'd need to use a colour animation plug-in for jQuery. In CSS I use transitions for Editor.

Allan