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]);
            }
        }
    ]
});

'''