Cannot read property 'style' of undefined

azizultex

Howdy,
I am new to DataTable for creating a woocommerce music table plugin. I was able to get the data show, but the table search and sort not working as I can see an error 'Cannot read property 'style' of undefined' in console. Any help is greatly appreciated.

My Table header looks like:

<table cellspacing='0' id="kpopx_music_table" class="kpopx_music tablesorter">
    <thead>
        <tr>
            <th>Preview</th>
            <th class="title">Song Title <i class="fa fa-caret-down"></i></th>
            <th class="artist_name">Artist <i class="fa fa-caret-down"></i></th>
            <th class="intensity">Intensity <i class="fa fa-caret-down"></i></th>
            <th>iTune</th>
            <th colspan="3" class="buysgd">Buy(SGD) <i class="fa fa-caret-down"></i></th>
        </tr>
    </thead>
    <!-- Table Header -->
</table>

Data Object in console: please check attached screenshot.

DataTable initiation:

$('#kpopx_music_table').dataTable( {
        processing: true,
        serverSide: true,
        ajax: local.ajaxurl +'?action=kpopxAjax',
        columns: [
            { "data": "preview" },
            { "data": "title" },
            { "data": "artist" },
            { "data": "intensity"},
            { "data": "itune" },
            { "data": "cart" },
        ]

});

Please let me know if further information is required.

Thanks

azizultex

So I have been able to find the issue that is colspan="3" in th.

allan

<th colspan="3"

Yes. That's the issue. You must have at least one unique cell per column in the header for DataTables to operate.

Allan