How to show (enable) the show/hide plus at all times.

Rufal

Hi,

(versions: Bootstrap 3, Datatables 1.10.16, responsive 2.2.0, buttons 1.4.2)

I'm thinking that this should be easy and I'm simply missing some option. But I can't find it in any of the documentation or examples.

Ok, so my layout has many columns and by default more than half of them are hidden. ColVis plugin then allows different users to show/hide columns depending on their business needs.

I then use a renderer to display any unseen columns on the nested child area.

responsive: {
            details: {
                renderer: function (api, rowIdx, columns) {
                    return format(columns);
                }
            }
        }

Then I do a check to see if 1) the column is hidden or 2) not visible to print the information not visible on the row.

if (c[0].hidden === true || dtbl.column(0).visible() === false) { *print info about first column* }

or, if I know this particular column sometimes doesn't have any data:

if ((c[17].hidden === true || dtbl.column(17).visible() === false) && c[17].data) { *print information about the 16th column* }

My problem is that when the visible columns fill the screen, it disables the child function and hides the blue (bootstrap) plus icon. But the user may have 8 columns simply hidden since he/she doesn't have to reference them that often.

So I want to somehow to tell the responsive plugin to simply always keep the show/hide click action enabled.

Any quick way to enable this?

Regards

allan

I'm thinking that this should be easy and I'm simply missing some option.

Funny how often I think that as well!

The thing here is that Responsive will operate with the rows which are defined to be visible by the DataTables API. If all of those columns are shown (as is the case here) then it thinks that there is nothing else for it to show in the child row, and thus it doesn't show the show/hide control!

I don't think there is actually a workaround for this due to this line - i.e. no columns have been hidden by Responsive, and thus there is nothing to show.

The best I've currently got is that you implement the show / hide directly like in this example and disable Responsive's own show / hide. You can still keep Responsive enabled, but just have it not show its child row control.

Allan

Rufal

Ah yes,.

After I posted I went and looked at dataTables.responsive.js and saw that row. So I had pretty much reached the conclusion that I couldn't use the responsive's child/extra information feature.

I actually started out using that example and moved to using the responsive feature.

Using this this example what is the easiest way to see if a column is hidden? (as opposed to not visible)

Thank you

allan

There isn't actually an API method for that - you are catching me on the hop today!

You could check for display: none (e.g. $(cell).css('display') === 'none')) as that is how Responsive hides columns, while DataTables actually removes them from the document.

Allan

Rufal

That's what happens when an ADHD programmer just rushes in without reading the documentation..

Yes your suggestion works.
This example gives me what I need:

 || $("#invoiceTable>thead>tr>th:nth-child(12)").css('display') === 'none')

Working as ordered now.

Thank you

Rufal

Want to post this just in case anyone wants to do something similar.
The above method almost works but doesn't since the TH will get assigned a new :nth value if you hide a column that comes before it.
i.e. there is no guarantee that :nth-child() will give you the column you are looking for.

So the solution is to change the HTML and assign data- values to your columns.

So this actually does what I need with guaranteed results.
Table:

<th data-column="6"  data-priority="3">Number</th>

JS:

if ($('#dataTable').DataTable().column(6).visible() === false 
     || $('#dataTable>thead>tr>th[data-column="6"]').css('display') === 'none') {
    //Print some data
}

Making the numbers between the html data- tag and DataTables column id match, means that it's easy to create a column render function.

But this will always give me guaranteed results even though column 6 is the third visible column.