Allow user to reorder and hide/unhide columns + state saving

Martin_S

Hi,

I'm using DataTables for my Trac watchlist plugin (http://trac-hacks.org/wiki/WatchlistPlugin), which
shows a list of watched wiki and ticket pages similar e.g. to the Wikipedia watchlists. The table data is inserted in the HTML page by the trac server and static for the client, i.e. not loaded by AJAX.

I would like to allow users of this plug-in to select the columns and their order using a simply interface, i.e.
drag & drop for the order and maybe some small delete/hide icon in the footer or header for every column.
The configuration should be saved and restored at the next visit.

So far I understand the internal of DataTables this should be possible to implement.
However, their seems no drag & drop plug-in for DataTables yet. Did anyone attempted to program something like the above and/or can give me some advice?
The alternative would be to provide a settings form for this, store the configuration on the trac server and deliver the table with the selected columns.

allan

There are a few discussions in the forum about being able to reorder columns in DataTables (just do a search for 'column reorder' and similar). But as of yet there is nothing which is really working properly. It needs a bit of time on it to develop in to a first class and supported plugin, which is on my to-do list, but not something I've done yet I'm afraid...

Regards,
Allan

Martin_S

Thanks allan for your quick answer.

I now implemented the column reordering on the server side. Because I allow the user to switch dataTable off and only work with a static table this is actually better.

I also added individual column filtering to it and use the 'save state' option to preserve the column filtering.
Now my new problem: When the user uses a form to change the columns, the page reloads with the new column order, but dataTable then applies the filter text to the wrong columns, i.e. does this strictly by index.

Is there a way to tell dataTable to do this by e.g. looking on the table headers?
My workaround is that the form submit functions simply deletes the column filter text. This avoids the issue of wrong filter texts in the columns, but means that the user looses them when he/she updates the column order. Ok, not really a big deal, but if there is a way to make it even more user friendly I would like to go it.

allan

I'm afraid there isn't an option for this at the moment. You can assign columns 'names' but they again are index based, so if you change the column order through data only and not the HTML / DataTables cache, that will go out the window as well. The easiest option would probably be to have a small function which loops over the columns in HTML looking for the target column (based on the title in the HTML) and will return the visible index - then pass that to the filter.

Regards,
Allan

Martin_S

Ok, I almost finished implementing the table incl. date/time pickers and special numeric filters (e.g. "4-12" shows all numbers between 4 an 12) and server sided column reordering.

Now the current problem:
When the user changes the order of columns I need to make sure, that the current state of the table isn't stored in a cookie and that the old cookie is deleted. Is there a way to disable the "save state" feature on demand? Is it enough to access oSettings in the submit function of the 'Change Column Order' form and switch the bSaveState off?

allan

You can indeed set bSaveState off ( oSettings.oFeatures.bStateSave = false ), but that won't delete the cookie. For that, you would need to manipulate document.cookie (using the internal functions might make it easier - _fnCreateCookie specifically). Or you could have it state save with the new information? Just do a draw to force a cookie update.

Allan

Martin_S

Thanks Allan for confirming this.
I already wrote a function to delete existing cookies before.
The new information (new column order) coming from the server so I need to reload the entire page.

I will now write a function to set bStateSave to false and delete the existing cookie when the user changes the column order.

Thanks a lot,
Martin

Martin_S

BTW, may I ask why the dataTable cookie is written every time the table is drawn and not at window unload?

allan

Basically I figured that the overhead for the action of updating the cookie was so low, that it was worth doing on each draw. It also allows for the situation where the user might open another window to the same page, and their table would be loaded in the same state, and it would overcome any situation when unload might not fire for whatever reason (blocked, browser crash etc).

Allan