Is this at all possible?

gordyr

We are optimizing our app at the moment and are working toward deferring as much javascript as possible.

There is one feature however that we would like to implement on a specific table and I wonder if yourself Allan, or anyone else, has any idea as to how this might be achieved.

The table is a list of projects. We have set the query to limit the rows to 25 which is plenty for the initial page render as you can only see approx 10 on a 1920x1080 resolution screen given the table viewport size.

The initial table is rendered purely in PHP now (since we are deferring as much JS as we can)

The only filtering method we need for this table is a simple text input filter which I have built manually and attached an fnfilter handler to the keyup event so that it will filter the datatable once it has been turned into one. When this input is focussed on the datatables script is loaded, along with a server generated datatables initialisation script and the required aaData for the table... containing ALL rows of projects.

However as soon as this is then initialised the table is drawn with the data I specified as an array in the aaData property..

What I would like to do is prevent this initial redraw, yet have all the data filterable. So that the table will only redraw when the user has typed into the filtering input.

My understanding was that this would be possible with iDeferLoading?

However, we also wish for users to be able to scroll down the viewport and when the user reaches the bottom load the next 20 or so rows.

I have already written the JS and php scripts to allow this and it is working fine outside of datatables.

However we want to use the data which is pulled in to the datatables object rather than request the data from the server agai as there seems little point in doing so when the data has already been returned during initialisation (although it is not visible) so...

Is there any way to access the non visible rows which have been stored in the datatables initialisation object via the aaData method, in order to render them on demand?


I hope at least SOME of this makes sense :-P

allan

> Is there any way to access the non visible rows which have been stored in the datatables initialisation object via the aaData method, in order to render them on demand?

Enable deferred rendering ( bDeferRender ) and use fnGetData or the underscore (_) methods to get the data. Deferred rendering will stop rows being created that aren't needed and you can do whatever you want with the data from the table with fnGetData or _.

I don't really understand this though:

> What I would like to do is prevent this initial redraw, yet have all the data filterable. So that the table will only redraw when the user has typed into the filtering input.

You said that the DataTables script and its initialisation are not loaded until needed and that you pass in aaData - so I don't understand why you would want to cancel the first draw? Surely that is the only draw? Or are you drawing the table and then applying the filter? In which case can you initialise the table with the filter ( oSearch )?

Allan

gordyr

Thanks allan. I'll give fnGetData a try shortly. For some reason I assumed this only retrieved data for rows that are currently visible.

With regards to preventing the initial draw...

The table and its first 25 rows are rendered in php as any more than that is unneeded. Filtering this table will not be a particularly common interaction so just pulling art of the data in for pageload makes sense. This shaves off 200ms on the first page load. (This is one of many optimizations we are making to the app. We have knocked off 1.5 seconds across the last week alone and pageloads now average 750ms for what is an extremely data heavy and highly interactive app)

Datatables gets initialised ONLY when the user goes to filter/search this table. however I want to prevent those first 25 rows from being redrawn upon initialisation.

I think I have now managed to get this to work using iDeferLoading. It wouldnt work previously as i had bpagination set to false.

allan

Oh I see - in that case yes, iDeferLoading is bob on for what you want :-). Interesting that it doesn't work without pagination - it should! I'll look into that - thanks for flagging it up.

Allan

gordyr

No worries... I just double checked that this was indeed the case. It is.

So just to confirm...

The second I set bPaginate to false, datatables draws all the rows upon initialisation. (Taking me from 25 rows up to 100+rows in the DOM, despite having iDisplayLength set to 25.)

Setting it to true keeps the initial 25 rows in place and just adds the even/odd classes. speeding up initialisation dramatically.

allan

> The second I set bPaginate to false, datatables draws all the rows upon initialisation. (Taking me from 25 rows up to 100+rows in the DOM, despite having iDisplayLength set to 25.)

Ah I see - I just tried it, and it actually does work the way I expected. Basically when you enable deferred loading, you need to create the HTML table to show the information that DataTables would show in its first draw. So if the display length is 25, only show 25 TR elements in the body - the TBODY will not be modified at all by DataTables on initialisation when deferred loading is enabled - only on the second draw would something happen.

Allan

gordyr

Indeed.. After thinking about it more it makes sense that it would not work (in the manner I had hoped) without pagination set to true. The datatable essentially cannot ignore the fact that it contains more rows than are present in the dom and is forced to render the rest.

With pagination on it understands that it can forget that initial redraw since the total number of rows is irrelevant as long as the number of rows in the DOM match the iDisplayLength.

That said, It may be worth adding a boolean option to iDeferLoading to enable to type of behaviour i describe. i.e. no matter what the table is never drawn until a filter/sort request is made.

Regardless, this is not an issue for me. I already have it up and running exactly as I had hoped. :-)