ColReorder - new plug-in for DataTables

allan

Hello all,

I'm very pleased to be able to announce the release of a new first class plug-in for DataTables: ColReorder.

ColReorder allows the end user to manipulate the ordering of the columns in a table through drop and drag of the column headers. Featuring tight integration with DataTables itself (server-side processing, state saving etc) and also all other first class plug-ins for DataTables (FixedHeader, FixedColumns, ColVis etc) this is a welcome addition to DataTables.

There are ten examples available showing how ColReorder can be used, with basic initialisation shown here:
http://datatables.net/release-datatables/extras/ColReorder/

Download:
http://datatables.net/releases/ColReorder-1.0.0.zip (put into the DataTables/extras directory, or download the DataTables 1.7.4 package).

Enjoy!
Allan

peterkronenberg

Fantastic! However, there is a bug in your example using FixedHeader at http://datatables.net/release-datatables/extras/ColReorder/fixedheader.html. The data in the column gets reordered properly, but the headers are staying in the same position (although when you drag the header, it shows the correct text)

allan

Hi peterkronenberg,

Good shout! Thanks for spotting that! I've just committed a fix, which unfortunately requires both FixedHeader and ColReorder to be updated. The fix can be downloaded in the nightly script on the downloads page ( http://datatables.net/download/ ). I'll not release it just yet in case anything comes to light, but will do soon if nothing else is flagged up.

Regards,
Allan

UPEngineer

Allan,

You mention in this plugin documentation that you must account for the column names in the return of the server side processing using sName property.

I am using php and unless I am missing something, I don't see any samples pertaining to this. Am I just overlooking it?

If not, how do I account for it in the json return? Do I have to return the order of the fields after the reorder?

I guess this part is confusing me.

Thanks,
Scott

UPEngineer

Allyn,

I think I have found a couple of bugs. Of course, it could have something to do with the php json return.. I have all my columns named using sName property.

However, if I have "bJQueryUI": true, then when I go to try and drag a column, it does nothing at all. But when I release the mouse button, I get the following error:

a.aoColumns[c] is undefined

If I remove the bJQueryUI property, the column successfully drags and repositions but as soon as it does, I now get the error:

ColVis.fnRebuild is not a function

I am using the ColVis plugin BTW.

If I remove the ColReorder plugin, everything works correctly.

Thanks
Scott

allan

Hi Scott,

1. jQuery UI theming - yup! Most certainly a bug there - thanks for the heads up. I've just committed a fix for this and the new version can be downloaded from the downloads page (the nightly version until I release this - a few days time): http://datatables.net/download/

2. ColVis.fnRebuild - Have you got v1.0.3 of ColVis? This was added in this release specifically for this function.

3. sName and server-side processing - have you taken a look at the server-side processing example and the PHP file in the DataTables distribution? The normal server-side processing file doesn't consider sNames and thus won't work as expected as soon as the columns are reordered.

Regards,
Allan

UPEngineer

Allan,

Thanks for the repy.

Glad it wasn't just me LOL.

As for ColVis, I was using 1.0.2. I will download the latest release and try it again.

I knew about the sName provisions,but I thought I looked in the distribution and didnt see anything in the PHP file. I may have actually looked in an older version. I will take a look and see.

Thanks,
Scott

UPEngineer

Allan,

Yep, I was looking in the 1.7.3 server processing ordering php file. And I knew I didnt see it LOL.

I have downloaded the new version and will start testing with it.

I have another quick question though.

I notice to enable column reOrdering you are using the "R" in the sDom parameter. Does it matter where it falls in this declaration or only that it's in there somewhere? Reason, I ask is that I kind of have a complicated sDom definition due to a couple of custom classes. Didn't want to risk breaking something else by just shotgunning the R parameter in it.

Man you are doing some really good work with this plugin (dataTables and all the other plugins)! Keep up the good work!

Scott

UPEngineer

Allan,

OK, got it going. And I just put the R sDom definition first and it worked.

One other thing.

I noticed through firebug that datatables is sending two arrays to php for processing.

They are sColumns and sNames. It appears to be the exact same data. Would there ever be a time that they wouldn't match?

Well, come to think of it, if you were not using the ReOrdering plugin, there would not necessarily be a reason to use the sName parameter would there?

It is not that big of deal, I don't think, but if it is sending the same data twice, if we didn't need it, we could save a few hundred milliseconds and a few bytes of memory :)

Working great now! Thanks.

Scott

allan

Hi Scott,

Good to hear you got it all sorted :-). For the 'R' in sDom, it shouldn't matter where it goes. If you don't want to put it into sDom, you can actually use 'new ColReorder( oTable, oConfig );' - which is something I plan to introduce into all the other plug-ins as well (where possible anyway), the ability to use an sDom parameter or 'new'.

As for sNames and sColumns - I'm a doughnut... I completely forgot about sColumns :-(. I was surprised originally when I didn't see an sNames parameter being sent - now I know why! As such, I'm going to remove the sNames in the next version of DataTables and modify the server-side script (its just a name change there). Oops! Thanks for pointing it out!

The reason for including sColumns / sNames is just in case you want to have the column order different from the order in the script for whatever reason - and it comes in useful for here :-).

Regards,
Allan

peterkronenberg

Allan,
When trying to use ColReorder, it tells me 'nParent is undefined' on column 67. I'm using the latest nightly build. I also disabled FixedHeader, since I'm seeing some more problems with it and ColReorder, but let's work on one at a time.

allan

I'm not seeing that issue - can you tell me what your initialisation is please? Or even better, a link? :-)

Thanks,
Allan

peterkronenberg

I was afraid you'd say that. Let me get something together

peterkronenberg

Hmm, can't reproduce it anymore. I'll let you know.

But an unrelated question. Is there a way to indicate that particular columns shouldn't be moved? I want my last column to always be the last column.

allan

You can cause columns from the left hand side to stay fixed ( http://datatables.net/release-datatables/extras/ColReorder/fixedcolumns.html ), but you can't have one in the middle stay where it is (simply because if you tried that the user could move a column on it's left to the right, and then your middle column is at the start).

Allan

tomtom

Hello,

I'm new to DataTables but I'm very happy to have found it. I was looking at the colreorder plugin and would like to save the order of the columns to my database. My question is, is setting bStateSave to true and using the fnCookieCallback callback the best way to get the order of the columns when a user changes them or is there a better way?

Thanks,
Tom

allan

It's certainly one option. Another one I'd consider would be to use fnDrawCallback and get the column ordering there (either using the internal function _fnColumnOrdering, or looping over aoColumns[].sName in the settings).

Of course if you are using server-side processing then the information is already present on the server-side and you could just save it on every draw request (sColumns parameter).

Allan

peterkronenberg

Regarding fixed columns, would it be possible to have the option to fix columns starting from the right instead of the left? (perhaps if iFixedColumns accepted negative numbers). Seems that it is a common thing to have the final column contain buttons and such.

allan

Yes that would be a good idea for a future enhancement. Noted.

Allan

peterkronenberg

Not sure if it's just me, but I don't think ColReorder works anymore with the update to FixedHeader that you just posted (removing the ID). I can't reorder when the fixed header becomes active

allan

I'm not seeing any problems when I try the FixedHeader integration example for ColReorder with the latest versions of the various bits of software. A cache problem perhaps? If not then if you could put up a link please :-)

Allan

peterkronenberg

Ok, try this: http://www.nova.org/~pak/test/colOrder.html

There are multiple problems. When reordering, I'm getting an error (reported by Firebug): ncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.removeChild]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://www.nova.org/~pak/test/js/ColVis.min.js :: anonymous :: line 15" data: no]

Also, although the columns get reordered, the header doesn't.

Second, you can see that when I drag the columns, it is dragging the copy that is at the bottom layer, which makes it hard to see what I'm dragging. Hard to explain, but hopefully, you will see it.

Finally, if you scroll up so that the FixedHeader becomes active, I can't drag the column headers at all to reorder

allan

The issue with the moving element is due to zIndex-ing - you just need to make the copied layer much higher, something like this http://datatables.net/release-datatables/extras/ColReorder/fixedheader.html . Perhaps just include that CSS.

For the removeChild issue - how are you initialising ColVis and are you calling fnRebuild manually? It's trying to remove a button which isn't there - but I can't see why they would be. Likewise I can't see why the FixedHeader doesn't work - given that my example does. I'll need to have another look in a little bit.

Allan

peterkronenberg

Hmm, I don't think I even updated the CSS when I started using ColReorder. Thought it would just be magic :-). Let me play some more and let you know.

I'm initialziing ColVis with: sDom" : 'RCT<"clear">lfrtip'
I'm not calling fnRebuild

peterkronenberg

Ok, fixed the CSS issue, but still having the problem where the headers themselves are not re-ordered.

http://www.nova.org/~pak/test/colOrder.html

allan

Yup - good call! It was indeed fnRebuild but it is called by the ColReorder plug-in. It was trying to remove a null element - which of course results in a Javascript error. I've jut committed a fix and you can pick up the ColVis nightly to get this.

Allan

peterkronenberg

Great. Looks much better. But when the FixedHeader is active, I still don't see the column headers being dragged, although the column reordering works fine.
Take a look here: http://www.nova.org/~pak/test/fixedHeader.html

allan

There is a Javascript error which is probably the cause:

jquery.dimensions.js:393
TypeError: Result of expression 'parent' [null] is not an object.

None of my plug-ins use jquery.dimensions.js so I don't know what would be causing this I'm afraid. However, I suspect that addressing that will fix the issue.

Allan

peterkronenberg

Hmm, I'm not getting an error. What exactly did you do to generate it? jquery.dimensions.js is used by the tooltip plug-in I'm using

allan

When the fixed header is scrolling (i.e. at the top of the page) I just tried to click and drag one of the TH elements. The error then shows up in the Safari debug console.

Allan

peterkronenberg

I am not seeing any error. Could you try it in Firefox?