DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

ColReorder - new plug-in for DataTables

ColReorder - new plug-in for DataTables

allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
edited October 2010 in Announcements
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
«1

Replies

  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    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)
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • UPEngineerUPEngineer Posts: 93Questions: 0Answers: 1
    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
  • UPEngineerUPEngineer Posts: 93Questions: 0Answers: 1
    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
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • UPEngineerUPEngineer Posts: 93Questions: 0Answers: 1
    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
  • UPEngineerUPEngineer Posts: 93Questions: 0Answers: 1
    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
  • UPEngineerUPEngineer Posts: 93Questions: 0Answers: 1
    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
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    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.
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    I'm not seeing that issue - can you tell me what your initialisation is please? Or even better, a link? :-)

    Thanks,
    Allan
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    I was afraid you'd say that. Let me get something together
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    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.
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • tomtomtomtom Posts: 1Questions: 0Answers: 0
    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
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    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.
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Yes that would be a good idea for a future enhancement. Noted.

    Allan
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    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
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    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
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    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
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    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
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    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
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    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
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    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
  • peterkronenbergpeterkronenberg Posts: 112Questions: 0Answers: 0
    I am not seeing any error. Could you try it in Firefox?
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.