Colreorder property replaces my colVis buttons

tahaorhan

Hello, my problem is that there are 85 columns in my table. I have a total of 4 colVis buttons. So you can think that I divided the columns into colVis buttons. If I replace the column on my 1st colVis button with my 2nd colVis button in the table, the column visibility buttons inside the colVis button also change places. The versions I am using are up to date. It has been mentioned in previous threads but I couldn't see a solution. I hope I could explain, sorry for my english

allan

Can you link to a test case showing the issue please? It is probably the listener to update the columns based on the new column ordering.

Allan

tahaorhan

https://jsfiddle.net/gmdy2zLh/5/

Move the name column to the right of the start date column, then examine the colvis buttons. Name column is now inside extra columns. I don't want it to be moved there

tahaorhan

I need urgent advice, can you please tell me why this is happening?

kthorngren

Use something other than the column index as the column selector. See this Colvis column selector example. I tried using the classname but it didn't seem to work. I was able to use the columns.name option and column-selector of {string}:name in this example:
https://jsfiddle.net/ecmjnyxs/

Its possible I'm doing something wrong but using the classname doesn't work in this example:
https://jsfiddle.net/ecmjnyxs/1/

Maybe @allan can tell us why.

Kevin

tahaorhan

When I name the th elements in my table and define the same shape, my colvis buttons are null

kthorngren

Please provide an example of what is not working so we can take a look.

Kevin

tahaorhan

Sorry Kevin i made a mistake it works for me for now but now i have a problem. I am using stateSave and stateLoad function to make colororder property permanent. I'm saving the column array to my database. An example record like [0,1,3,2] in this scenario opens a different column that is not visible when I change their places and refresh the page. I'm leaving the jsfiddle link of the code I wrote below, you may not have a chance to run it, but if there is something I'm doing wrong, please correct me.

https://jsfiddle.net/4tya9cw1/2/

You can't fully test the scenario because I'm sending a request to the backend, but my codes are like this. If I couldn't explain my problem, I'm waiting for your feedback. I can give a more detailed example.

kthorngren

I'm not clear on what problem you are trying to solve with that code. This example shows ColReorder working with stateSave. This example shows column visibility working with stateSave.

Can you update the test case so it shows the issue? Maybe replace the ajax calls with localStorage.

Kevin

tahaorhan

I couldn't get it to work, but that's how I edited it last.

https://jsfiddle.net/ycefx1r2/19/

To explain the problem more clearly, I give an example. The default order of the table is [0,1,2,3,4,5], only columns with index [0,1,2,3] are visible in this table. If I change the column order to [0,1] If I do ,2,4,3,5] the column visibility in the table becomes [0,1,2,4] I don't understand why it is doing this.

tahaorhan

I guess I'm guessing why I'm experiencing this. When I enter the stateSave function like this, it sets a column visibility state according to the new order of the column. However, my column visibility order should always be default, how can I adapt it.

colin

I'm not clear still what the problem is. Please could you give step by step instructions (such as, "move office to be the second column", etc.) on how to reproduce the issue, and explain what you'd expect to happen instead.

Colin

tahaorhan

Ok, let's forget about my previous problem and I'll take care of it. Now I want to do this. I want to add show all button on top of 'Extra Columns' colvis button. But how can I do that it will only show the columns inside the 'Extra Columns' colvis button. Test link is below.

https://jsfiddle.net/ecmjnyxs/

tahaorhan

@kthorngren @colin @allan

kthorngren

Do you mean you want the colvisRestore button similar to this example?

I added it to your test case:
https://jsfiddle.net/xzwhadq1/

Kevin

tahaorhan

not this. It should be in 'Extra Columns', so when we open the 'Extra Columns' button, the image we see is [Start Date Office Extensions], the Show All button should be on top of them. So when we click on 'Extra Columns', we will see the new buttons [ Show All Start Date Office Extension]

@kthorngren

kthorngren

Oh, I thought you wanted a new button. Sounds like you want the solution in the example I linked to but the button on top. Use the prefixButtons option instead of postfixButtons. Updated example:
https://jsfiddle.net/xzwhadq1/1/

Kevin

tahaorhan

Actually, it's not exactly what I wanted. Exactly what I want is that let's consider all columns as initially visibility false. When we click on the prefixButtons we added to the Main Columns, only the name, position and salary should be visible, but in this example, they are all visible.

@kthorngren

kthorngren

I don't believe there is anything built in for this. Sounds like you will need to create a custom button using prefixButtons like this example. In the custom button use columns().visible() to show the appropriate columns.

Kevin

tahaorhan

I fixed the prefix button like this it works fine for me. Thanks for everything Kevin, you saved my day.

https://jsfiddle.net/3uktfeao/2/

kthorngren

Looks good! You might want to use the column-selector of {string}:name in case the columns are reordered. Like this:
https://jsfiddle.net/pgLkyfxv/

Kevin

tahaorhan

Kevin, I'd like to ask one more question with my apologies. It calculates according to the 3 column date ranges in my table and prints the data. So far everything is fine, then when I move the colReorder column the data inside is flying. This causes. I'm sorry, I couldn't put a test link, I couldn't adapt it according to my own code, if you have an idea, I would be very happy if you share it.

@kthorngren

tahaorhan

Do you have an idea for this last question I asked? I couldn't create a test environment, sorry I hope I could explain.

@allan @colin @kthorngren

kthorngren

I don't understand what the data inside is flying means. Please provide more details.

If you can't provide a test case then at least post the code you are using for the calculation.

Kevin

tahaorhan

tahaorhan

data seems to be deleted when i move the column
@kthorngren

tahaorhan

https://jsfiddle.net/rm8jhqzv/1/

My getChangeForFilter() function is there to fill the relevant cell and the other one to render the dataTable may give an idea if you examine the codes.

tahaorhan

@kthorngren @allan @colin

kthorngren

getChangeForFilter() function is there to fill the relevant cell

You are not using Datatables API's to update the table cells. Datatables doesn't know about these updates. See this FAQ for more details.

Kevin

tahaorhan

hello again kevin I have a last question if you remember we added the prefixButton. It was added at the beginning and it seems to work fine, but when I move the columns with colReorder, my show all button disappears, this is why. I do not encounter a problem when I try on the test link, but I also have this problem.

@kthorngren

kthorngren

I don't see the issue in your test case:
https://jsfiddle.net/3uktfeao/2/

We will need to see the issue to help debug. Please provide the steps to recreate the issue in your test case or update it to show the issue.

Kevin