DataTables load times

Sk0

Hi,

I'm working with a client who has a need for sortable tables. They want the table size to be unlimited and do not want paging. There's also an issue that I need to deal with where depending on some data relating to the row, each row will display a different image or something similar. This data does not go into the row itself (meaning I can't refer to it once the data I get from the server goes out of scope unless I add hidden fields... and there's a lot of these sorts of conditionals; a bunch of columns need to be buttons & I bind their click functions generically later).

As it stands, ~600 records is taking ~3s to load, and the general theme seems to be 100 records = 0.5s worth of rendering, with everything pulled out except passing data to DataTables. I was curious to see if there was a good approach to lowering this time without adding paging. I should also note that sorting a massive table like this seems to be performing poorly as well.

I should also note that this timing is for Firefox 3.6, and I also have to support IE 8, which is another can of worms as far as efficiency goes.

Thanks

John Archer

Hi!

You might find this interesting: Introducing Scroller - Virtual Scrolling for DataTables (http://www.datatables.net/blog/Introducing_Scroller_-_Virtual_Scrolling_for_DataTables) and maybe also this: DataTables AJAX source example - with deferred rendering (http://www.datatables.net/release-datatables/examples/ajax/defer_render.html)

Regards

Sk0

Thanks for the reply.

The Scroller plugin you linked looked very promising and did indeed drastically reduce rendering time. I still have an issue with one of my data tables, however.

I will have multiple tables (and each renders on separate page events). One of these tables is actually embedded within a form, and one of the columns is a checkbox for selecting/deselecting a row. The client wants this table to have a hard cap of 5000 records displayed on it, but this is another one of those that is taking some time to render. With Scroller (and infinite scrolling and paging), checkboxes that are not visible at the time of form submission are not passed to the server as 'checked'. I was curious if there's a plugin or functionality that would allow checkbox values to persist through paging & be sent with the form?

Thanks again.

Sk0

I was able to resolve my issue by maintaining an array of booleans, representing 'checked' and 'not checked'. I used the fnDrawCallback setting to add a click function to checkboxes as they were drawn that would update the appropriate entry in this array. Then, I simply serialized this array in order to send it to the server in my $.post call.

In doing all of this, my tables now load in under a second up through thousands and thousands of entries. Sorting works at fantastic speed. Thanks for the help with performance, and thanks for the fantastic product.

If anyone sees this and has a suggestion for a better way of handling checkboxes & paging, let me know, I would love to give it a shot.

John Archer

Great to read that!

Also thanks for sharing your experiences with checkboxes etc. I am quite sure this will be a topic for me, too, sooner or later.

I let you know if I do things another way when it's time.

Regards