Bootstrap tabs + rowGroup + own summary render not working after column.adjust()

hkarhunen

Hi,

I have bootstrap tabs where every tab view has own datatables. When I go (load) first time page and first tab show everything goes great. I have own group render line where is three td fields. This time it show colspan=1 there. After I change tab or I change my reasolution everything going bad. It put somehow there colspan=3 automaticly and I dont know how to fix that? Is this somekind of bug on library or what I do wrong?

Here is one datatable example:

`$('#tblsummarywithsoutharea').DataTable( {
language: {
"sProcessing": "{{ __('datatable.sProcessing') }}",
"sLengthMenu": "{{ __('datatable.sLengthMenu') }}",
"sZeroRecords": "{{ __('datatable.sZeroRecords') }}",
"sInfo": "{{ __('datatable.sInfo') }}",
"sInfoEmpty": "{{ __('datatable.sInfoEmpty') }}",
"sInfoFiltered": "{{ __('datatable.sInfoFiltered') }}",
"sInfoPostFix": "",
"sSearch": "{{ __('datatable.sSearch') }}",
"sUrl": "",
"oPaginate": {
"sFirst": "{{ __('datatable.sFirst') }}",
"sPrevious": "{{ __('datatable.sPrevious') }}",
"sNext": "{{ __('datatable.sNext') }}",
"sLast": "{{ __('datatable.sLast') }}"
}
},
ajax: "/registrationsummaryonjson/1?mgid=2&sgid=3",
idSrc: 'groupid' + 'agegroupid',

        columns: [
            { data: "maingroupname" },
            { data: "secondgroupname" },
            { data: "thirdgroupname" },
            { data: "gendername"},
            { data: "visible_order"},
            { data: "agegroupname", className: "dt-group-level-2" },
            { data: "countsum" },
            {
                data: null,
                className: "dt-body-center",
                render: function (data, type, row) {
                    var reglisticon = '<a href="/regnamelistbygroup/2?mgid=' + data.maingroupid + '&sgid=' + data.secondgroupid + '&tgid=' + data.thirdgroupid + '&agid=' + data.agegroupid + '" data-toggle="tooltip" title="{{__("registrations.Player list")}}"><i class="fa fa-address-card fa-lg green-icon"></i></a>';
                    if (data.teamscount > 0) {
                        var createteamicon = '';
                    } else {
                        var createteamicon =    '<a href="" id="createteam" data-groupid="' + data.groupid + '" ' +
                            'data-maingroupname="' + data.maingroupname + '" ' +
                            'data-secondgroupname="' + data.secondgroupname + '" ' +
                            'data-thirdgroupname="' + data.thirdgroupname + '" ' +
                            'data-agegroupname="' + data.agegroupname +'" ' +
                            'data-agegroupid="' + data.agegroupid +'" ' +
                            'data-tableid="#tblsummarywithsoutharea" data-toggle="tooltip" title="{{__("registrations.Create team")}}"><i class="far fa-plus-square fa-lg green-icon" style="margin-left: 10px;"></i></a>';

                    }
                    return reglisticon + createteamicon;
                }
            }
        ],

        columnDefs: [
            { visible: false, targets: [ 0,1,2,3,4 ] },
            { orderable: false, targets: [ 5,6,7 ] }
        ],
        order: [
            [ 0, 'asc'], [ 1, 'asc' ], [ 2, 'asc' ], [ 3, 'asc' ], [ 4, 'asc' ]
        ],
        rowGroup: {
            //startRender: null,
            endRender: function(rows, group) {
                var total = rows
                    .data()
                    .pluck("countsum")
                    .reduce( function(a,b) {
                        return a + b*1;
                    }, 0);

                return $('<tr/>')
                    .append('<td>' + group + ' yhteensä</td>')
                    .append('<td class="normalpaddingleft">' + total + '</td>')
                    .append('<td></td>');
            },
            dataSrc: [ 'secondgroupname', 'thirdgroupname', 'gendername' ],
            emptyDataGroup: '-'
        },

        //scrollCollapse: true,
        //scrollX: true,
        responsive: true,
        paging: false,
    } );`

Here is my tab change function:
$(document).on('show.bs.tab', 'a[data-toggle="pill"]', function(e) { $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust(); });

kthorngren

We will need to see this problem to help debug. I started a test case for you. Please update it to replicate the problem.
http://live.datatables.net/gezuraki/1/edit

Kevin

hkarhunen

I try to simulate it with that debug editor but not get there same problem/situation. I try to also debug my own code and it look likes it coming when I add responsive: true.

Can I use responsive with rowGroup?

hkarhunen

Now I get it coming on debug with that responsive : true

hkarhunen

http://live.datatables.net/gezuraki/4/edit

kthorngren

Interesting I don't see that problem.

I'm using Chrome on a Mac. What browser are you using?

Kevin

hkarhunen

When you change that output view size that it must make responsive (first small) then change bigger it going stuck and it happen.

colin

I'm not seeing it either. Please could you give step by step instructions on how to reproduce,

Colin

kthorngren

@colin I can see the problem. Adjust the table until Responsive kicks in. Should see it then but you can make it larger and still see the problem.

Kevin

hkarhunen

Exactly Kevin! That is situation.