Hide column initComplete first row colspan="8"

toomanylogins

I am showing and hiding columns on within initComplete.

this.api().columns([6,7]).visible(false).columns([9,11]).visible(true)

However the first row always includes an additional class colspan="8"

If I add .draw() it works okay however this is server side so I get an another call to the server which I'm trying to avoid.
This table includes Editor
Anyone else seen this ?
Thanks

kthorngren

Datatables doesn't support colspan in the tbody. See the HTML requirements for more details.

Are you using the RowGroup extension which, depending on configuration, will insert rows into the tbody at the top of each group. Something like this example.

Please post your relevant Datatables code so we can get an idea of what you have.
Better is a link to a test case showing the first row with colspan="8"?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

toomanylogins

I'm not using row group and I do not have colspan anywhere in my js or html code. This is being added to the first row in the table after the initialisation when I show and hide cols. If I redraw .draw() the table during the initComplete I do not get the problem.

Thanks, Here is the code

var timeTaskTable = ltgObj('timeTaskTable').DataTable({
        initComplete: function () {
            // UPDATING THE SELECT BOX
            const timeOff = ltgObj('time.timeOff').val();
            let searchDiv = $('#timeTaskTable_wrapper').find('.dt-search')[0];
            if (timeOff === 'True') {
                $(searchDiv).addClass('d-none');
                ltgObj('statusSelect').addClass('d-none');
                $('.dt-buttons').addClass('pb-1');
                $('.dt-paging').addClass('pt-1');
                timeTaskTable.state.clear();
                this.api().columns([6,7]).visible(false)//.draw();
                

            } else {
                $('.dt-buttons').addClass('d-none');
                $('.dt-paging').addClass('pt-1');

                $(searchDiv).find('.form-control').addClass('d-none');

                $(searchDiv).children('label').text('Select Status: ');

                $(searchDiv).append($('#statusSelect'));

                $('#statusSelect').change(function () {
                    var selectedItem = ltgObj('statusSelect').val();
                    timeTaskTable.columns().search('');
                    timeTaskTable.columns(7).search(selectedItem).draw();
                });

                this.api().columns([9,11]).visible(false)//.draw();
            }
        },

        ajax: {
            url: '/admin/time-task-datatable?', // SENT TO THE SERVER...

            data: function (data) {
                // META DATA...
                const timeOff = ltgObj('time.timeOff').val();
                const timeID = ltgObj('time.ID').val();
                data.timeID = timeID;
                data.timeOff = timeOff

                // !IMPORTANT: SPECIFY TYPE FOR EACH COLUMN FOR SERVER-SIDE QUERIES

                data.columnsMeta = [
                    { type: 'text' }, // ID
                    { type: 'text' }, // SELECT
                    { type: 'text' }, // createdDate
                    { type: 'text' }, // createdTime
                    { type: 'text' }, // endTime
                    { type: 'text' }, // durationTE
                    { type: 'text' }, // STATUS
                    { type: 'text' }, //ASSIGNED
                    { type: 'text' },
                    { type: 'text' },
                    { type: 'text' },
                    { type: 'text' }, //PROJECTid
                    { type: 'text' } //TIMETYPE
                ];
            }
        },
        searching: true,
        //stateSave: true, // !IMPORTANT
        search: { return: true },
        serverSide: true,
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        columnDefs: [
            {
                targets: [0],
                name: 'ID',
                visible: false
            },
            {
                targets: [1],
                name: '',
                width: '30px', // select
                visible: true
            },
            {
                targets: [2], // DETAIL LINK TEH NAMES OF THE COLS ARE USED FOR SEARCH
                name: 'createdDate',
                width: '70px'
            },
            {
                targets: [3],
                name: 'createdTime',
                width: '50px'
            },
            {
                targets: [4],
                name: 'endTime', /*NAME OF THE CALC ATTRIB*/
                width: '50px'
            },
            {
                targets: [5],
                name: 'duration',
                width: '70px'
            },
            {
                targets: [6],
                name: 'projectLink.name',
                visible: true
            },
            {
                targets: [7],
                name: 'taskLink.name',
                visible: true
            },
            {
                targets: [8],
                name: 'status',
                visible: true,
                width: '70px'
            },
            {
                targets: [9],
                name: 'description',
                visible: true,
            },
            {
                targets: [10],
                name: 'companyID',
                visible: false
            },
            {
                targets: [11],
                name: 'timeType',
                visible: true
            }
        ],
        language: {
            lengthMenu: 'Show _MENU_   '
        },
        order: [[2, 'asc']],
        responsive: true,
        pageLength: 10,

        layout: {
            topStart: 'pageLength',
            topEnd: ['search', 'buttons'],
            bottomStart: 'info',
            bottomEnd: 'paging'
        },

        buttons: [
            {
                extend: 'create',
                editor: editor,
                action: function (e, dt, node, config) {
                    ltgExecuteMethod('Time_Sheet_Detail', 'timeOffRecord');
                }
            },
            {
                extend: 'editSingle',
                editor: editor,
                action: function (e, dt, node, config) {
                    const rowData = dt.row({ selected: true }).data();
                    ltgFormAction('business-permission-detail.html?action=edit&modal=true&record=' + rowData[0]);
                }
            },
            {
                extend: 'remove',
                editor: editor,
                action: function (e, dt, node, config) {
                    const rowData = dt.row({ selected: true }).data();
                    ltgExecuteMethod('Role_Detail', 'deletePerm_' + rowData[0]);
                }
            }
        ]
    });

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

The dtr-control class comes from Responsive. Looking at this example there is no colspan assigned to the cell containing the responsive control.

Does the colspan="8" appear in the first column of all rows or just he first?

Instead of using initComplete to set column visibility I would look at using columnDefs to set the visibility using a variable. Something like this:

const timeOff = ltgObj('time.timeOff').val();

let hiddenColumns = [9, 11];
if (timeOff === 'True') {
  hiddenColumns = [6, 7];
}
  

var timeTaskTable = ltgObj('timeTaskTable').DataTable({
        initComplete: function () {
            // UPDATING THE SELECT BOX
            const timeOff = ltgObj('time.timeOff').val();
            let searchDiv = $('#timeTaskTable_wrapper').find('.dt-search')[0];
            if (timeOff === 'True') {
                $(searchDiv).addClass('d-none');
                ltgObj('statusSelect').addClass('d-none');
                $('.dt-buttons').addClass('pb-1');
                $('.dt-paging').addClass('pt-1');
                timeTaskTable.state.clear();
                // this.api().columns([6,7]).visible(false)//.draw();
                 
 
            } else {
                $('.dt-buttons').addClass('d-none');
                $('.dt-paging').addClass('pt-1');
 
                $(searchDiv).find('.form-control').addClass('d-none');
 
                $(searchDiv).children('label').text('Select Status: ');
 
                $(searchDiv).append($('#statusSelect'));
 
                $('#statusSelect').change(function () {
                    var selectedItem = ltgObj('statusSelect').val();
                    timeTaskTable.columns().search('');
                    timeTaskTable.columns(7).search(selectedItem).draw();
                });
 
                // this.api().columns([9,11]).visible(false)//.draw();
            }
        },
 
        columnDefs: [
            {
                targets: hiddenColumns,
                visible: false
            },
            // The remaining columnDefs definitions 
        ],
    });

I believe the

            {
                targets: hiddenColumns,
                visible: false
            },

Will need to be first in the array to take precedence.

Unless @allan has an answer we will probably need to see a test case showing the colspan="8" in the first column.

Kevin

allan

Yup, please link to a test case showing the issue so we can see what is happening and be able to debug it.

Thanks,
Allan

toomanylogins

colspan="8" only appears on first row. I'm using initComplete because the table is on a page where the table layout is conditional on load. I have tried all options from setting all definitions to true some to true and false etc. I will try and sort a test case. Thanks