Optimal set up for my table

Pummra

I am trying to get an idea of what the best set up for my datable is so that initial load time on the page is kept to a minimum, as well as a minimum of execution time on JS.

I have around 700 rows of data, each row contains 25 columns.

I need the first two columns to be frozen, the header to be frozen, the data should be scrollable on X and Y.

Currently I have set up PHP to provide all of the data as a JS array, however the time required to set up the table as described takes too long. Ideally I would like not to have to paginate the data and allow it all to be scrollable, however doing this so far in tests that I have run it takes far too long to process. What is the most optimal setup I should look at. I had wondered if I could put everything in place on the table in PHP and also supply an array of the data in JS so that JS doesn't need to do the initial draw.

Pummra

I have uploaded an example of the table here:

http://www.mikej.co.uk/tabletest/

Probably worth mentioning that this has only been tested properly in Chrome so far.

allan

The killer for performance there will be FixedColumns - see this example for a bit of an explanation and how it can be addressed: http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

Allan

Pummra

Just been running some more tests and *think* I have found a more efficient set up but just wanted to run my thoughts here first.

I am thinking, as opposed to using the fixed columns plugin I could actually initialise two different tables which both contain the same data, however one table will only display two columns and the other will display the remaining columns.

I could then create a fake header for the table which will send sort commands to both tables at the same time.

I have done a very quick test and it appears, to me, that it is a lot faster to initialise and sorting happens at the same time even when sending to both tables. I could then use some JS to ensure that any scolling that I create scrolls both tables at the same time.

Is there any issues implementing it in this way?

Again, made a very quick test here (haven't set up the column hiding etc. yet) to test sorting both at the same time click on "SORT" at the bottom of the page.

allan

> Is there any issues implementing it in this way?

You'll need to be careful about making sure any filtering, paging, sorting etc actions are applied to the other table (so you'll have two directional binding which might be a bit messy). You'll also need to row height match the tables, which is the slow part of FixedColumns - which as I noted before can be addressed with CSS sizing (assuming all rows are the same height).

Its certainly possible - but it's not what I would do personally :-)

Allan

Pummra

I think I can cope with the dual bindings. I would probably set up a fake header to cover both tables and link them to the appropriate sorting function.

I did try without row height on FixedColumns, as I am planning on using CSS to ensure the height is correct. However it was still quite slow to initialise.

I ran a quick benchmark between the two options and having two tables does seem faster than one.

http://jsperf.com/tablestest

Its obviously a hell of a lot less tidy way of doing it. Might have a play this weekend and see what I can sort out. My main issue is ensuring that the browser doesn't throw up any unresponsive script errors whilst everything is getting set up.

allan

Single table: 0.63 operations / s
Table tables: 3884 operations / s

8-|

I think it would probably be more fair to include "bDestroy":true in the initialisation, just to make sure it is fair - but there seems to be an error when I add that. Not entirely sure what is causing it unfortunately.

Certainly worth investigating more, but I still think that FixedColumns is a better option ultimately - although if there are speed improvements that can be put into it, that would be excellent.

Allan

Pummra

Is there anyway to get a copy of the data from one table in its current form. Including any filtering or sorting that has been performed?

Just thinking, I could create the second table with data from the first . All sorting and filtering functions will then be passed to one table, which would in turn pass its updated data to the other.

allan

> Is there anyway to get a copy of the data from one table in its current form. Including any filtering or sorting that has been performed?

Absolutely - the _ (underscore) function: http://datatables.net/docs/DataTables/1.9.1/DataTable.html#_ .

> Just thinking, I could create the second table with data from the first

You'd need to rebuild the second table on every draw (can be done, but is expensive). You would also need consider the bidirectional aspect of the actions - sort on one table and you need to destroy the other. But then you are loosing state information if you then sort using the second table. I suspect if the two tables need to be kept in sync, the API would need to be used and the state read from fnSettings .

Allan

Pummra

Ok, just set up another test based on that.

http://www.mikej.co.uk/tabletest/

The lower table takes its data from the first. I am not worrying about the bidirectional aspect as I would only send sorts and filters to one table. Once the table redraws it automatically sends its data to the other.

If you look on the above link, you can actually only sort the first table, when you do the table below updates to match.

Going to have a bit more of a play now.

allan

Looks good. I'll certainly be interested to hear how you get on with this approach if you do pursue it :-). In the mean time, I'll see how much of a performance increase I can get into FixedColumns.

Regards,
Allan

Pummra

I've stopped with it for now. The performance decrease on normal functions such as sorting etc. on browsers such as IE was too much. Sticking with having it paginated instead for now.

dhineshtyr

Hi ,
Actually i have more than 20,000 records to be displayed on table . so while running the page its taking too long time in some cases its displaying time out error .. How would i solve this
Thanks in advance

allan

@dhineshtyr - See http://datatables.net/faqs#speed