Problem with colvis collectionLayout: 'fixed columns' producing error

mastmind0

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

kthorngren

I built a test case for you:
https://live.datatables.net/zocarede/1/edit

It exhibits the same issue. @allan will need to take a look.

Kevin

allan

Thanks @mastmind0 for flagging this up and Kevin for the example!

I've committed a fix and the nightly build now works.

If all looks good for you, I'll package up a new release of Buttons with the change.

Allan

mastmind0

I clicked on your nightly build link, and from what I can tell, it's still not functioning how version 2.1.8 used to function. The list of columns should be displayed over the table, not under it.

allan

The CSS file wasn't using the nightly in the demo I linked to - sorry: https://live.datatables.net/zocarede/7/edit . Position fixed shows it over the center of the window.

Allan

mastmind0

Yes, that looks great! Thank you so much for all your hard work that you put into DataTables!

allan

Many thanks for the confirmation (and your kind words ).

I've released Buttons 3.2.1 with the fix.

Allan