colReorder compatibility issue other functions

vismark

Hi,
I'm trying to implement the colReorder function along with order and colVis functions.

Problem is that if I move a column, the indexes returned from order or colvis functions is the original one and not the actual one.

For example, consider a table with 3 columns (id 0, 1 and 2), column 0 contains internal data so it's hidden by default and not considered in the colVis columns, I order column 2 and then switch it with column 1:
- before moving column, table.settings().order() returns [ 2, "asc" ]
- after column has been moved i expect to receive [ 1, "asc" ], but I get [ 0, "asc" ]

So, if I save table.settings().order()'s result to the database and then use it back on next table initialization, everything is messed up. I've menaged to solve this replacing the returned index with table.colReorder.transpose(idx) in a for cycle, but is this really the way to go?

With colVis is even worst and I don't even know how to work around it. In the same scenario as above, if I select from the dropdown menù the column number 2, it remains visible, column 0 becomes visible between column 2 and 1, column 1 remains visible.
I've set up a demo for you: https://jsfiddle.net/0yc8sd1z/. Please, switch the 2 columns and then try to hide the column "Office".

vismark

Also, try to switch column and then hide "Position" column:
- "Office" column will disappear
- "Position" column will stay visible
- both the column will be unselected from the dropdown

allan

Thanks for this. I fear that ColReorder and the column visibility buttons aren't playing too nicely together just now. I've tried a number of different ways in the code already, but none really work completely, so I'm going to have to go back to the drawing board with this.

Also a reorder will always insert before a hidden column due to the calculation it performs (left position basically), which is why you are getting 0 rather than 1. I've never been massively happy with that, but alternatives also have their downsides.

If you the order() method's result to a database, you should also save the column ordering, which should solve this issue. In fact, using the built in state saving, you can save the state to a database with stateSaveCallback.

Allan

vismark

Thanks for oyour feedback allan.

I'm already saving and restoring the column ordering. Problem is that to set back the ordering settings I need to reference column ids by the transposed id, not the one returned by the order() function. Just restoring column ordering and applying order() function's result isn't working.

Do you have an idea about when this will be fixed or reimplemented? If not soon, do you think you can solve this urgently through a premium support?

allan

Part of the issue is that I actually don't know how to resolve it at the moment (although I've just had an idea while typing that...). The problem is that the object / array defining the buttons is modified after initialisation, expanding it for things like colvis (which expands to be multiple buttons), so I don't have the original array to work with. Taking a copy of it at the start might help resolve this and just regenerate all buttons. The only issue would be that any changes (adding / removing buttons via the API) wouldn't be reflected.

Let me have a bit more of a think about that. Unfortunately, I've got a large support backlog at the moment, so I'm running a bit behind with most things.

Allan

vismark

Ok allan, please keep in touch about this

vismark

Hi allan,
I've done further tests.

Ignoring the hidden internal column with the fixedColumnsLeft: 1 setting, solves the first problem but unfortunately it introduces a new one (of course, less important of the first one but even enough bad for the end user): if now you try to drag the second column before the first, it won't let you do it. You have to drag the first one after the second. Might this problem be easier to solve?

I've updated the fiddle: https://jsfiddle.net/0yc8sd1z/6/

vismark

Ah, also: I confirm that restoring the column filters from stateSaveCallback successfully restores the active filterings on the correct columns. Problem is that when i manually populate back the inputs on the head of each filtered column using the function table.column(id).index('visible'), I get the original position, not the reordered one. Example:
- table.colReorder.order() returns [ 0, 1, 2, 3, 4, 7, 5, 6, 8, 9 ]
- table.columns().indexes('visible') returns { 0: null, 1: null, 2: null, 3: 0, 4: 1, 5: 2, 6: 3, 7: 4, 8: 5, 9: 6 } instead of the expected { 0: null, 1: null, 2: null, 3: 0, 4: 1, 5: 4, 6: 2, 7: 3, 8: 5, 9: 6 }

Karlo

I just wanted to add this Link to another question that I wrote recently, including a jsfiddle explained there. That's probably a duplicate, so I marked that other question as answered. However it may still be useful to have that other test case at hand.

@allan

Taking a copy of it at the start might help resolve this and just regenerate all buttons. The only issue would be that any changes (adding / removing buttons via the API) wouldn't be reflected.

In fact I add elements to the buttons dropdown by code. My my case that happens is a handler of the "buttons-action.dt" event where I first check whether my additions are already in the provided node argument and add them only if not, so I wouldn't mind re-creating it every time the buttons are re-generated, provided that the event is being fired again.

Karlo

I created a Pull Request with a small change to buttons.colVis.js. For me, this is just the solution, at least it seems so.

Can you please give it a try?

Thanks
Karlo

colin

See also this thread here - report of the same issue.

toabm

Thank you @colin , I think it is indeed the same isse.

I use the colReorder extension to re-arrange columns, and ColVis button to hide/show columns, and I soon as I change the order of the columns, the visibility buttons stop working as expected, meaning they do not hide the expexted column.

My problem will be solved if there were any method to re-build the col-vis buttons. The second button of the list will always toogle the second column visibility, the only problem is that if I have changed column order, and placed another column in the 2nd place, the text in the buttons wont be updated, and the second button will keep the title of the "old" 2nd column foerever, no matter what its possition is now.

Hole we can solve this soon...thanks a lot!

toabm

I have seen it is already fixed in the nightly version. Do you know if there is any way to use the nightly version of datatables and its extensions with npm?

colin

Hi @toabm ,

It hasn't been fixed yet, so not quite sure what you're seeing, something odd. And no, I don't think nightly builds do work with npm, but I'll check.

Cheers,

Colin

Karlo

Is it possible that my PR already made it into the nightly build?

colin

I didn't think Allan had merged it, I'll check and report back.

allan

No its still open. Sorry, I'm a little swamped at the moment!

Allan

toabm

Ok, I do not understand how does the whole development process work...:)

So as soon as @allan will merge it, it will be fixed on v1.10.18? Or do I have to do something in order to get the changes?

Thank you, and sorry for my ignorance...:)

allan

Its actually part of the Buttons repo, so rather than an update to DataTables it would be part of the next Buttons release. Buttons is currently 1.5.4, so it should be in the next release which will be 1.5.5, but I'm not certain yet when I'll get to that I'm afraid.

Allan

Karlo

I think however that this Patch for DataTables is in fact a bug fix.

I think you really should have a look at it before addressing the same problem in the Buttons repo.

toabm

Thank you @allan for your fast response. I will be looking forward for your update!.... I will wait until then, no sense on fixing it myself if it is a known bug schedulled to be solved! Thanks for your work and your time!

Pepsi Dave

The work around I've found is to remove the visibility button and then re-add it whenever the columns are reordered. Seems to work.

    table.on('column-reorder', function () {
        table.button(0).remove();
        table.button().add(0,
        {
            extend: 'colvis',
            autoClose: false,
            fade: 0,
            columns: ':not(.noColVis)',
            colVis: { showAll: "Show all" }
        });
    });

Also need to turnoff realtime for colReorder:

colReorder: { realtime: false}

elnjensen

Thanks for the workaround, @Pepsi Dave. That worked for me, though I found that when restoring a saved state upon revisiting a page, the button ordering in the visibility dropdown was off at first. Calling the above function once after the table is initially loaded (as well as on any subsequent reorder as above) seems to solve that problem.

toabm

Thanks for the workaround, @Pepsi Dave . That worked for me too. I am saving the columns state too and when I reaload the page I have to remove the button and create it programmatically for it to work properly.

colin

We will be releasing today, and this fix will be present.

Cheers,

Colin