Upgraded from DataTables 2.1.8 to 2.2.1 and everything is working great except for when I use colvis with collectionLayout 'fixed columns', it produces a JavaScript error and the columns list appears at the bottom of my page outside of all content. Namely it seems to be the "fixed" option that is causing the issue. For debugging I switched to datatables.js instead of the .min.js and when I click the column visibility button I get the following error:
Uncaught TypeError: hostNode[0] is undefined
_popover https://path/to/DataTables/datatables.js:102277
Which is this offsetParent line here:
// Align the popover relative to the DataTables container
// Useful for wide popovers such as SearchPanes
if (position === 'absolute') {
// Align relative to the host button
var offsetParent = $(hostNode[0].offsetParent);
var buttonPosition = hostNode.position();
I tried changing that line by removing the [0] just to see what it did:
var offsetParent = $(hostNode.offsetParent);
Which allowed it to get past that error, but then it would just error on the next line with:
Uncaught TypeError: hostNode.position is not a function
_popover https://path/to/DataTables/datatables.js:102278
At that point I gave up trying to troubleshoot the issue.
Here's how I'm calling datatables:
cirt_accounts_dataTable = $('#cirt_accounts_table').on( 'error.dt', function ( e, settings, techNote, message ) { console.log( 'An error has been reported by DataTables: ', message ); } ).DataTable({
"colReorder": true,
"layout":{
top2Start: null, top2End: 'pageLength', topStart: 'search', topEnd: { "buttons": [ {extend: 'colvis', collectionLayout: 'fixed columns', className: 'btn-light py-1 mb-1'} ] }
},
"responsive": true,
"scrollX": false,
"data": [],
"columns" : [
{ "data" : "field1" },
{ "data" : "field2" }
],
"lengthMenu": [ [25, 50, -1], [25, 50, "All"] ]
});
Just some other details in case it matters, I'm using Bootstrap 5 and jQuery on my pages.
And if I switch back to 2.1.8 everything works as expected.
If there's anything I can test, please let me know. And of course thank you all for your fantastic work with DataTables!!
Debugger code: ujobuj