Drag 'n' drop columns

jnthnlstr

Hi,

I know the request for being able to drag columns to re-order has come up once or twice. I've been using a library called 'dragtable' (http://www.danvk.org/wp/dragtable/) and integrated it with DataTables, which up until today has been fine. Unfortunately, the complicated integration between DataTables, Allan's FixedHeader plugin and dragtable - not a jquery plugin - ended up with me running into an IE bug I couldn't fix.

I decided this evening to rebuild the dragtable feature as a DataTables plugin. I have the essential drag 'n' drop experience working, although a copy of the column doesn't yet float under your mouse, and there is some missing styling on the copy that is created.

(I have made an extra plugin as part of this that redraws the table using the data in oSettings.aoData/aoColumns - useful if you're interacting with that to update the information.)

I've put all the code up on pastebin and would very much appreciate any feedback: http://pastebin.com/f53745926



J.

jnthnlstr

I have an update:
http://pastebin.com/f4c763347

- animated dragging works
- dragging is cancelled if you move out of the table
- column copy is styled correctly


J.

jnthnlstr

Next update.

http://pastebin.com/f700955e3

This is a big modification. Changes include:

- much faster creation of floating column
- works in IE!
- text-selection doesn't happen when you drag
- it's a DataTables plugin now

Known issues:

- column classes are not getting copied across

It would be great if someone would see if they can use this as a plugin for their table.


J.

allan

Hi J,

Now this is awesome! :-)

I've not had a chance to actually try it out yet, but I will endeavour to do so this weekend. Nice one!

Allan

jnthnlstr

Hi Allan,

Take a look at it in action - http://tw.wiki-data.com/search?q=bank - this is the development site for the replacement to wiki-data.com.


J.

allan

Hi J,

This is superb! Sorry for the delay in replying to you, things are starting to cool down a bit at this end :-)

I have two suggestions if I may:

1. Adding a visual indicator to show where the column will be inserted. With narrow columns you can easily put a dragged column into an unintended position.

2. Would it be possible to split your function which actually does the column swap into a separate plug-in, something which could be called programmatically (for example oTable.fnChangeColumns( 1, 4 ); ), and that will take care of iDataSort, filtering columns, hidden columns and all that stuff - and then your drag and drop would interface with that, allowing the developer to do something with JS if they want, or the end user to do your drag and drop.

Regards,
Allan

izzy6150

Hi,

I am just about finished with my version of Draggable Columns, just got a few fine tweeks to do. Some of the code used is that of jnthnlstr's pastebin, however I have integrated that with JQuery UI Sortable for ease of use.

I may have to re-write it tho as a plug-in as currently for my job i have encapsulated it all directly into the dataTables stuff (Sorry :-) my boss is a real hard nutt.)

Regards,
Izzy

MisterCheesy

Hi, Im having a little trouble integrating the latest version of the pastebin code into my table.

I have to admit I'm a little new to using plugins though.

Does anyone have an example of how to enable/install/use this plugin in javascript?

danielsen

Hi, I'm looking for a similar plugin to update the record ordering in the database, not only client-side. Where can I find one? Thanks.

Selicor

Cool feaure. So is it stable - why is it not listet on the Plugins sections on the site?

MikeS

The link to see it in action ( http://tw.wiki-data.com/search?q=bank ) doesn't work for me. I receive a "HTTP 404 - File not found" error.

Selicor

Hi MikeS,

same for me, i saw it a few months ago. i took a short look into the code, generelly i's exactly what it's meant to be. If you take a look here you can see it (but not in combination with Datatables) http://www.danvk.org/wp/dragtable/

MikeS

Thanks for the link Selicor. I'd seen that demo a while back too, but, would have liked to seen it applied to datatables!

How does one actually hook it up to datatables?

Selicor

i found the LIVE implementation jnthnlstr mentioned - can be found here:

http://www.wiki-data.com/search?q=bank&avid=&adv_1_field=Operational+City&adv_1_value=London&adv_2_field=Operational+Country&adv_2_value=GBR&index=0

really nice...only thing i am missing is the feature Allen already mentioned above:

1. Adding a visual indicator to show where the column will be inserted. With narrow columns you can easily put a dragged column into an unintended position.

By the way: how did he integrate that SHOW | HIDE column feature? I like it a lot. Is there a plugin available?

Greetings,
selicor

Selicor

Show Hide feature, just found it by myself:

http://datatables.net/examples/api/show_hide.html

greetings,
selicor

MikeS

Hey Selicor,

You beat me to it. Thanks for that link. It is pretty cool. The only things that I don't like about it is the lack of a column sorting indicator and the fact that you need to double click the header to sort and the lack of multiple column sorting.

Do you know how to hook up the column dragging plugin to datatables? I'm a complete noob and don't know where to begin.

tri

Hi *,

how can i intergrate (http://pastebin.com/f700955e3) that to a default DataTables Installation ?
Where do I have to include that js code ? Is there any "simple" Drag and Drop Feature / Plugin for Datatables planed ?


Thank you.
Tobi

redhookbaker

hi,

This is really nice, is there a sample code with datatables? thanks

redhookbaker

I was playing around with this,

$('#example).html( '' );


the table can be dragged, but only for the first page, anyone knows why?

MisterCheesy

allan, can you help us out with this one? I need a little help with using this too--some sample code would be invaluable to several of us

Maybe promote it to the plugin page? Or consider it as a true feature request for the future?

It looks like a feature a bunch of people would appreciate and use.

Selicor

yeah would be nice.

greetings

allan

Hi guys,

Yes, at some point column re-ordering will become a 'true' plug-in for DataTables. I think there are issues which still need to be resolved such as dealing with hidden columns, and a clearer UI - but this is quite certainly on the to-do list (there is just to much to do!).

Regards,
Allan

devks

Hi Allan,

If we have a column reordering plug-in for Datatables now. Could you please point me to it.

Thanks a lot.

allan

http://datatables.net/extras/colreorder/ :-)

Allan

devks

This is so awesome. Thanks Allan.