How to show/hide column(s) on complex header in a Data Table

rahsharm77

I have run into trouble while working with Data Tables API. I have a table with dynamic column header generation (which also determines the colspan value) and the actual complex header text.

I am then populating my data table with the data that I receive from an API.

Problem: Once the data table is loaded, I have used the Button's option show/hide columns but the problem is that I always receive the columns that are not in colspan or have exactly one column.

I wanted a solution where I could show/hide my column(s) based on my complex generated header.

So basically my question is that I want to show/hide column based on my Main Header but when I initialize the show/hide feature of data table using Buttons, it always catches the sub headers and only those main headers whose colspan is 0.

Working fiddle: https://jsfiddle.net/k0afsmzt/

I am trying to show/hide columns based on Main Header(s) but the data tables plugin only shows the sub headers when you click the column visibility button.

colin

Hi @rahsharm77 ,

It sounds like you want to use column groups, as shown in the example here.

Cheers,

Colin

rahsharm77

Thanks for the answer but I have a table in which all data including Header Text and Colspan value is being generated dynamically. So I am unable to use the column groups since I do not know the start and end range of a complex header.

colin

You should be able to parse the table information, since it must exist before you initialise DataTables, and work out the colspans and starting points. You just need to parse that top header line for all the <th> elements.

C

rahsharm77

I did try parsing the table information but the problem that I have encountered is that the table is being generated dynamically i.e. the complex headers, sub headers and data are all coming from a backend process. So initially I was able to achieve this using column groups in which I had parsed the existing data structure using jQuery (which included getting the arrays for hiding the column range).

But now a new complex header was added to the backend process with associated sub headers and associated data. Now I do not know if Data Tables has a way to generate a button of the newly added complex header and then the logic to hide the column based on the range.

Any thoughts?

colin

Hi @rahsharm77 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

rahsharm77

Please find the link to data table example:

http://live.datatables.net/towuneyu/1/edit

In this I am trying to find a way to hide the columns over the spanned Main Header. If you will observe, when you click the column visibility button, only the sub headers are shown as options.

I used the colVisGroup also but that is a dynamic method using jQuery.

My main problem is that my table generation is totally dynamic. In the above example, assume that Main Headers are added along the way with its sub headers.

Is there any way in Data Tables to achieve this functionality of hiding columns on Complex Headers?

Thanks

colin

Hi @rahsharm77 ,

That test case doesn't replicate your issue, or show what you've done so far, so unfortunately it doesn't help us to understand your problem.

Cheers,

Colin