Dynamically switch from cached data and Ajax dataSrc

shanewise

We're using DataTables through Backbone/Marionnette and it's working great. I have one particular template with views that switch between two different tables. One combines all the counts on the back end, the other splits it into categories. That part is working fine, but from a performance perspective each time a view destroys, the table gets flushed too. So switching back and forth between the tables causes a fresh Ajax call.

I would love to save the table.DataTable().row().data() into a variable in my model and use that for my dataSrc instead of making a new Ajax call if it existed.

I checked out the examples and tried searching in the API, but I was coming up with nothing. Is there a method or example that can do this?

Appreciate any reply!

P.S. Congrats Allan on the new baby, my wife is going to give birth any day now too so I'll be joining the club!

jLinux

I believe the row().data() returns the data for just one row, doesn't it?

let me make sure I understand you correctly, basically... You have one DataTable instance, and you'd like to be able to dynamically load either one of two different data sources, without having to create a new AJAX call each time, correct?

In that case, I would suggest one of two things..

1. Use a closure as the ajax value, and you can do something like check if the content for said table has been called and cached, if not, then call it and save it in memory to a local variable, then that gets used next time its loaded.
2. Dont use ajax, and just write your own $.ajax calls, and pass the value to data, then when you need to clear the table and add new data, you can just clear().rows.add().draw().

Obviously for both of the above, the table structure would need to be identical

shanewise

Thanks for your reply - I think I see where you're going there, and I think using my own AJAX calls, then passing the data would probably work out great.

jLinux

Look at ly plugin, it does pretty similar stuff.

https://github.com/jhyland87/DataTables-Live-Ajax

allan

@shanewise - Hope all is going well with the thumb-twiddling, waiting for it all to get going! Oh and you've stocked up your sleep reserves ;-)

Regarding your question - I would suggest jLinux's second option as probably the more direct approach for this. Don't tell DataTables anything about the Ajax configuration - just use the API to feed it data as and when needed.

Allan

shanewise

@allan - my baby girl was born on the 25th (at a 3AM rush to the hospital OY!), my wife's a champion mom and things are going great!

@jLinux - thanks for the link. In my case the query will be a bit too expensive to do so often (and shouldn't be necessary as I'll just use DTE to keep things in order and keep the back end up to date without full refreshes), I'm planning on taking your 2nd option + Allan's recommendation that endorses that option too.

allan

Congratulations :-) Welcome to the club!

Allan

shanewise

I make heavy use of the following states under the language options: loadingRecords, zeroRecords, emptyTable and processing.

If I'm using my own AJAX calls and passing it into the data option, will I need to fire off those events manually now?

allan

Yes you probably would - although there is no external API for them. zeroRecords wouldn't be useful since that can be handled by DataTables itself (you just give it an empty array and it knows that there are zero records), but the processing indicator would need to be triggered yourself.

There is a legacy API plug-in for that - it could be updated for the new API which might be useful.

Allan

shanewise

OK thanks for the tip. I think I can probably fake it with my own loading state and just display the table once it's finished rendering or something.

I would try to help out by updating that plug-in, but I'm not sure I have a deep enough understanding to do that at this time.

allan

Its something I've been meaning to do for a while - thanks for the prompt:

$.fn.dataTable.Api.register( 'processing()', function ( show ) {
    return this.iterator( 'table', function ( ctx ) {
        ctx.oApi._fnProcessingDisplay( ctx, show );
    } );
} );

Example: http://live.datatables.net/jujivure/1/edit

I've committed it to the plug-ins repo so it will be available on the CDN with the next release.

Allan

shanewise

Thanks that's awesome!