Hide/show specific FixedHeader on action with multiple tables on same page

rmayer

Hello,

Firstly, I can't link to a page, as the implementation is within an intranet environment, so please bear with me.

I have two DataTables on a page, both with the FixedHeader plugin invoked. Since one of the tables is changed using $.ajax to other content (not using DataTables), on a user action, I wish to be able to hide and re-show this SPECIFIC FixedHeader object at the same time. The other table (also using DataTabes/FixedHeader) should remain in place at all times.

Currently, when the said DataTables table is replaced with the new content, the FixedHeader lingers, since this object has not been hidden. If I hide it using $('.fixedHeader').hide() then obviously BOTH FixedHeader table headers are hidden, being the same class. I can't see a way of specifying the id/class of a FixedHeader and hence address it individually.

Furthermore, $('.fixedHeader').show() does not behave as expected even if you submit to the idea that both FixedHeaders will turn on/off together, since this FixedHeader reappears in the top left of the screen and not in its original position.

Any help/guidance on this issue would be appreciated. I hope I have provided enough information, but if not, do let me know and I'll go into more detail.

Many thanks.

Richard

rmayer

So in the end, I just blasted all FixedHeader instances using $('.fixedHeader').remove(); and reinstated the common table's FixedHeader at the same time as creating the dynamic one's. It's a pity we can't currently address a specific FixedHeader instance - if a DataTables developer reads this, perhaps it could be considered for inclusion in a future release?

johan.steurs@staff.telenet.be

+1 for this feature request (thanks rmayer)

i have several dataTables in separate collapsable divs, i want to remove the related FixedHeader when a specific table is collapsed (otherwise the fixed header will stay put on its current position).

Kichrum

+1!! It is really awful if we don't have ability to work with extension on single page applications! If datatable's instance removed (removed table from DOM), even without datatable API's method destroy(), or datatable is hidden on the page (has display: none; !$table.isVisible()), FixedHeader should be removed as well! And re-created on table appears again).

For now I didn't find better solution than running this function every 1 sec (but it's terrible!!!):

run: function() {
    var isDataTable = function(nTable) {
        var settings = $.fn.dataTableSettings;
        for (var i = 0, iLen = settings.length; i < iLen; i++) {
            if (settings[i].nTable === nTable && !settings[i].bDrawing) {
                return true;
            }
        }
        return false;
    };
    $('.FixedHeader_Cloned').each(function(_, header) {
        var $header = $(header),
                tableId = $header.find('table').attr('aria-describedby').replace('_info', '');
        if (!$('#' + tableId).is(':visible')) {
            $('#' + tableId).removeData('fixedHeader');
            $header.remove();
        }
    });
    $('.dataTable[id]:visible').each(function(_, table) {
        var $table = $(table);
        if (!$table.data('fixedHeader') && isDataTable(table)) {
            $('.FixedHeader_Cloned [aria-describedby="' + table.id + '_info"]').parent().remove();
            $table.data('fixedHeader', new $.fn.dataTable.FixedHeader($table, {alwaysCloneTop: true}));
        }
    });
},

Please fix it ASAP!

allan

This feature exists in the development version of FixedHeader. I would welcome anyone trying it out and letting me know how you get on with it.

Allan

Kichrum

Dear allan, if I want to use it, I have to use callback of datatables onTableHidden(), which is not implemented in the API. So this feature could work only if I have some other functionality to catch table's visibility - which is related to other page elements, not to datatable. It's a violation of patterns.

Feature also don't cover the case if user goes to another page using AngularJS. When user returns back, new FixedHeader_Cloned element will be created, we can't use hidden FH again, because datatable destroyed (removed from DOM) and created again.

allan

If you set an element to display:none, there is no event triggered (at least that I am aware of - would love to be proven wrong there as it would be exceptionally useful!) so I can't know that this has happened.

For complete separation of components your best bet would be to trigger a custom event that would signal that an element has been hidden and have an event handler that would perform whatever updates are needed.

Allan