What method is best for huge table?

Chrille

I have a table with 18 columns and 5000 rows, initiated as follow:

[code]
oTable = $('#example').dataTable({
"aoColumns": [
{ "bSortable": false },
null,
null,
null,
null,
{ "bSortable": false },
null,
{ "bSortable": false },
null,
null,
null,
null,
null,
null,
null,
null,
null,
{ "bSortable": false }
],

"bPaginate": false,
"bStateSave": true
});
[/code]

When I open the page in FF and Chrome it hangs after about 1 minute.

Do you think it would work better if I convert to ajax, js array or do I need to use server side? I rather not use server side to keep the load down.

Any ideas how to improve/reduce load time?

allan

You are dealing with 90'000 data cells there, so a fair bit of data. I'm surprised that Chrome would hang completely though - I would have thought it would just be a small delay. However, there will be a cut off point for acceptable delay, and it sounds like you might be beyond it. I'd suggest going to server side processing here - it might actually reduce the load on the server for some cases (i.e. not all 5000 rows are going to be viewed every time), and you can use options like fnSetFilteringDelay (an API plug-in) and server-side pipelining to reduce the number of requests to the server.

Allan

Chrille

Quick and precise answers as usual :)

Ok, then I'll convert to server-side!

Another question: I really like ColVis, I'm planning to replace my own solution with yours. In the example the selection is not saved between pageloads, is that possible to do?
Since I have 18 columns, the drop down menu would be quite long. Do you know how to make it scrollable?

allan

1. Save saving - This should happen automatically when you enable bStateSave in the DataTables initialisation. DataTables will save the column visibility state and reflect that on reload.

2. Scrolling - I've not tried it, but if you set a height on the element (class of "ColVis_collection") and overflow: auto - then that should do the trick.

Allan