problem rowgroup with button colvis

afla

Hello all,

Datatable is great plugin I'm using for almos 3 years finally I'm facing problem in a project using rowgroup with button colvis.

using rowgroup and td colspan after selecting/deselecting colvis table body and width display annoying.

is there anyone who can help.

demo link > https://jsfiddle.net/mspv7hqf/1/

thanks

colin

Hi @afla ,

The problem is how you're creating the footer:

                return $('<tr/>')
                    .append( '<td colspan="3">Averages for '+group+'</td>' )
                    .append( '<td>'+ageAvg.toFixed(0)+'</td>' )
                    .append( '<td/>' )
                    .append( '<td>'+salaryAvg+'</td>' );

It looks like you've created that example from the RowGroup examples, but that example isn't demonstrating visibility and always assuming there are six columns, which there are initially, but this won't be the case when columns are getting hidden. Also, you need to consider which columns are visible - for example there may not be an age column visible so would you want to show the age average? And if you do, where, since the column isn't visible?

I'd suggest removing the td elements and just display it as a single string, as in this modified example here. You could then use CSS to ensure the spacing and layout looks decent.

Cheers,

Colin

afla

@colin
thanks for reply yes your right I create the jsfiddle from rowgroup example, as demo only... i can remove the visibility of column the one to be calculated as sum, and also remove the td colspan ..

but in my case the total value of single column going outline of parent td, again I can use css (to) wrap text but that looks ugly... the problem only occur when I use td colspan. so I tough maybe there will be some way to integrate both plugin together.

thanks

colin

The plugins do work together, you just need more logic in your code as I said. You can't have six columns in your group line, but only three or four in the table. Likewise you need to decide what to do if a column is removed where you're showing averages. If you use CSS, you can add div elements to a single string which can then be positioned.

afla

@colin thanks,

I try several way from yesterday that is because the data is in tabular can't use any other tags inside table but when I remove colspan from td it work good

if you have any idea and share the code.

thanks

daniNull361

Hello, I'm having the same problem.

A solution I had thought about is to reload the table (or reset the rowGroup row) after colvis button selection was finished. Sadly I have no idea how to add this behavior to the colvis button without destroying the existing functionality.

Any ideas? Thanks in advance.

daniNull361

Just found the column visibility event that is fired when the visibility of a column changes.

He ist the code how to find first td with colspan and change colspan depending on state.

$("mytable").on( "column-visibility.dt", function ( e, settings, column, state ) {
    var elmt = $(".group.group-end").first().find("td").first();

    // change colspan depending on state
    var colspan = elmt.prop("colSpan");
    colspan = (state ? (colspan + 1) : (colspan - 1));
    $(".group.group-end td:first-child").prop("colSpan", colspan);
});

I also have columns with total or average values. I gave those columns a class name for identification (col-3 and col-5) and a visible class.

return $('<tr/>')
    .append( '<td colspan="3">Averages for '+group+'</td>' )
    .append( '<td class="col-3 (rows.column(3).visible() === true ? " show" : " collapse")">'+ageAvg.toFixed(0)+'</td>' )
    .append( '<td/>' )
    .append( '<td class="col-5 (rows.column(5).visible() === true ? " show" : " collapse")">'+salaryAvg+'</td>' );

In the final "column-visibility.dt" function based on your example I only change colspan if column is smaller than 3. And if column is 3 or 5 I show() or hide() my column depending on state.

daniNull361

Sorry, my code wasn't not quite correct. Copied parts to fit the example and didn't check syntax. Correct version below.

return $('<tr/>')
    .append( '<td colspan="3">Averages for '+group+'</td>' )
    .append( '<td class="col-3 '+(rows.column(3).visible() === true ? ' show' : ' collapse')+'">'+ageAvg.toFixed(0)+'</td>' )
    .append( '<td/>' )
    .append( '<td class="col-5 '+(rows.column(5).visible() === true ? " show" : ' collapse')+'">'+salaryAvg+'</td>' );