Optimal set up for my table
Optimal set up for my table
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.
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.
This discussion has been closed.
Replies
http://www.mikej.co.uk/tabletest/
Probably worth mentioning that this has only been tested properly in Chrome so far.
Allan
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.
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
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.
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
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.
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
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.
Regards,
Allan
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