ColReorder not working with "bJQueryUI": true,

ColReorder not working with "bJQueryUI": true,

vgolfvgolf Posts: 1Questions: 0Answers: 0
edited November 2010 in Bug reports

Just started looking into this quite amazing and comprehensive tool...

Anyway I found when "bJQueryUI": false, ColReorder works like a charm but when set to true the styles are applied nicely but it doesn't work anymore.

When the header is grabbed with the mouse there is only a long white bar but still no error but trying to drop it produces and error in the console:

Uncaught TypeError: Cannot read property 'bVisible' of undefined

pointing to line 162 in the full version of ColReorder.js...
* Move the DOM elements
if ( oSettings.aoColumns[iFrom].bVisible )

Tried to trace back what is missing when the column is being grabbed but no success.

Maybe it's just a config issue if not a bug...

Any input appreciated.

All best,



  • bstrechbstrech Posts: 4Questions: 0Answers: 0
    Love datatables and am having a great time using it on a rails application. I too ran into this issue since I have enabled jquery ui styles. Can you give me some pointers to where I can look to resolve this? I would be happy to fork on github and work on a fix.
    As an aside, I also was looking into implementing a new ColVis ui configuration option using jquery dialog and multiselect to allow you to select the columns you want to view and sort them all in one interaction, then submit. Since I am using the serverside integration I would like to avoid a lot of extra trips to the server when someone is changing visibility on multiple columns.

  • jwystupjwystup Posts: 1Questions: 0Answers: 0
    edited December 2010
    I've run into the same problem. It seems like the issue is on line 590 where it tries to get the target element. If you're using bJQueryUI, the TH has a DIV inside of it, so the DIV is the target element instead of the TH. I changed line 590 in the non-minified version of ColReorder to the following and it works both with and without bJQueryUI enabled.
    if (!$("th")) {
    //For bJQueryUI = $("th").first();
    this.s.mouse.targetIndex = $('th', $('tr').first())
    } else {
    //original line 590:
    this.s.mouse.targetIndex = $('th', );
  • rewenrewen Posts: 72Questions: 1Answers: 0
    Thanks jwystup!

    This fix worked for me in the latest version I got with 1.7.5 :)
  • allanallan Posts: 58,217Questions: 1Answers: 9,311 Site admin
    If you grab the latest version from the download page (the nightly) it's fixed in there: .

This discussion has been closed.