Single button to hide 1 column while making another column visible.

Larry27

Hi,

I've working with the custom buttons and have been able to get my columns to be made visible with the following code. My problem is that when I make columns visible, I want the others invisible. I am trying to keep the number of columns visible at any one time limited to keep the users attention focused. For example, if a user clicks on the 'Payroll' button, I don't want them to also see the 'Debt' or the 'Contracts column'

This is my code, which works fine. I just need the code to hide some of the other columns.

Thanks,

Larry

buttons: [

    {
        extend: 'columnVisibility',
        text: 'Payroll',        
        visibility: true,
        columns: '8'
    },
    {
        extend: 'columnVisibility',
        text: 'Debt',
        visibility: true,
        columns: '9,14'
    },
    {
        extend: 'columnDefs',
        text: 'Contracts',
        visibility: true,           
        columns: '11'           
    }

]

kthorngren

See if this example does what you want. BTW you have extend: 'columnDefs' in the last group which won't work.

Kevin

Larry27

Hi Kthorngren

Thanks, I realized that didn't work (columnDefs) after I ran it, lol.

Your solution did the trick for me, thank you very much.

When I click on my buttons they work fine, but I have to click twice to get the headers and columns to align properly. I've tried a few solutions, but no luck. Is there a simple way to refresh that so the user only has to click once?

Happy Holidays

Larry

kthorngren

The example seems to work good. Maybe you have a styling conflict or issue specific to your page. The first thing I would do is make sure you have all the correct styling files for the style framework you are using. Use the Download Builder for this.

As a workaround you might be able to use columns.adjust() in the column-visibility event.

To troubleshoot we will need to see the issue. Please post a link to your page or a test case replicating the problem.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Larry27

https://www.baldwinproject.ca/app/Test40New7.php

Go to the page, and click on the red 'Choose Data' on the top right of the page. A modal form will appear. Select from each of the potential variables. I have not finished coding the validation rules yet, so if you miss any variable, you may get an error. Just click on the 'Choose Data' button again and make sure all variables have been selected.

If you click on the light blue buttons. Some fields will be hidden and others will become visible. You'll notice that the headers and columns beneath only align if you click the button a second time. I'm lost here

https://debug.datatables.net/oneliy

I hope this provides the information you require? Any help you can offer, would be greatly appreciated.

Larry

kthorngren

I'm getting a JSON error when clicking the Get Data button. I populated each field. This is the Ajax response:

Notice: MySQL Error: You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near ')
and baldwinproject_Data1.0.cmsb_on_municipalities.ut_number in (10...' at line 41
- in mysql_functions.php on line 270 by dieAsCaller() in /home/baldwinproject/public_html/cmsb/lib/common.php on line 301

Maybe you can give us specific options to choose or populate the table with data so we can try different buttons to choose the visible columns.

Also point us to the file that contains your Datatables code.

Kevin

kthorngren

I looks at your .js and .css includes and noticed a couple issues. These probably won't fix the column alignment.

1. You are loading jquery.js multiple times on lines 37, 39, 43 and 1911. You should only load it once.
2. You commented out responsive.bootstrap5.min.js on line 1964. This should be loaded when using Bootstrap 5. Use the Download Builder to get and verify you are loading the appropriate integration files for Bootstrap 5.

Looks like this is the table you are using:

<table id="sched40-wsTest" class="table table-bordered text-nowrap border-bottom key-buttons stripe table-hover auto w-100 display compact">
</table>    

It is recommended to apply style="width:100%" on the table tag, as described in this example to allow Datatables to calculate the column widths. See if adding that helps.

For further debugging help please see my previous post.

Kevin