Question about the best way to go about creating a plugin

jLinux

A while ago, I was looking for a plugin that would add some sort of animation to rows that were created/deleted/updated. I know that you cant really "animate" the trs, but even just background fading effects and fadeIn/fadeOut would be nice, just to signify that something was deleted/created/updated.

I was able to accomplish this on my own table, granted, it was very "hacky". Since theres only a callback for creating rows, and not removing or updating, I had to override the row().remove() and row().data(), which was pretty ugly. Heres an example of just the fade effect for deleting rows

I started thinking, that instead of doing this for all 3 actions, maybe its better to just code something with the draw callback... Is there a way to see which rows were deleted/added/edited via the API from within the draw? And if not, I could try to place the logic inside my own registered draw() API method.. But I still run into some logic issues there.

Lets assume this is on a very basic table, no ajax, no rowId, so the indexes have to be used. Would it be possible to do something like diff the current data structure against the previous data structure, to see what rows were added/removed/updated? Then just do a little jquery magic on them, right before the draw is completed?

Like I said, I got this done with some really crappy JS code, but ive seen a few threads or posts with people asking or commenting about it, so I wanted to try and make it a DT Plugin, and preferably one that wouldnt act as a factory to add some effects then just proxy the request over to the datatables API methods.

Thanks!

allan

Is there a way to see which rows were deleted/added/edited via the API from within the draw

Not really. When the table is drawn all of the rows that are displayed in the table are reinserted into the DOM (regardless of if they are required or not).

What I think you might want here is an event that will indicate if a row has been added or deleted. Unfortunately that is not something that DataTables provides - it is something I will add in the next major release.

Would it be possible to do something like diff the current data structure against the previous data structure, to see what rows were added/removed/updated?

That is probably currently the only option.

Allan

jLinux

Is there a way to kinda rename the exiating api methids? Aobi can create mybown row().remove(), then call the renamed version?

Or call the internal version from my cuatom one?

Diffing the data structure would teally only work if theres a rowId, which id like thiz to work if there isnt one..

allan

I'm afraid there is no way to rename existing methods. There isn't even a way to access a method internally so you can reassign it - that isn't something I had considered in the development processing.

Allan

jLinux

It looks like if I wanted to make this a plugin, the only accurate way would be to basically just override the row().data(), row().remove() and row.add() with functions that basically just copy the index of the row(s) to an object, as well as the action that was performed on them, then execute the exact same code as whats in the overridden version...

Then for the draw(), just kinda do the same thing - look at the object that contains the row indexes and actions, perform the fadeIn/fadeOut/ColorFade actions, then execute the exact same code as whats in the draw() code within the jquery.dataTables.js file.

Theres gotta be a way to do this without replacing core DT API methods.. That just really hurts any updates in the future.

How does Editor do it? You said it fades rows in and out, thats basically what id like to do, only add a more advanced configuration option (duration, color fading, etc etc)

Thanks @allan!

jLinux

(Bringing the convo from this thread over here...)

In CSS I use transitions for Editor.

I don't currently have Editor, can can you maybe show me the part that does the animation? I think I can take it from there.

I looked at the editor sample, and I see new rows have the color fade, which I could accomplish using createdRow, but that only does it for one of the 3 actions I'm trying to target.

Also, you said that just comparing the JSON data during the draw event would be the best way to go, but the only issue I have with that, is that wont tell you which rows had what done to them, unless you use the rowId

This seems like it might be more trouble than its worth, but I would really like to try it.. hmm

allan

Its not so easy to give just that individual piece of code as it uses a few bits and bobs (SCSS minix, a bit of Javascript to add and remove classes, and the classes in SCSS themselves), and it is specifically for Editor's classes and configuration, so you might actually get more from a transition tutorial like this one.

I'll try to rip the code out in the next few days, but I'm not sure how useful it will be :-)

Allan

jLinux

I keep wanting to make this plugin, thinking theres got to be a better way than rewriting the remove(), add() and data()... >.<

If I did something in the draw, it would only work for modified and add rows, as the draw event fires after its drawn, so I couldn't do a "fade out"