search

DataTables / FixedHeader

Fix the header, footer, left or right columns of a table in place, to always show them when scrolling
http://www.datatables.net/
Other
75 stars 83 forks source link

Tab + Ajax Proposed Quick Fix. #19

Closed timothymarois closed 8 years ago

timothymarois commented 10 years ago

I have wrote a small quick patch for tabbed content.

At the moment, fixedheader appends to the body, which is not good when dealing with external tables loading in ajax and using tabs at the same time. Each tab loads a different table, and fixed header is one class without an id. so here is what I proposed.

fixedHeader.js line 329 I have added jQuery(nCTable).parent().attr( "clone-id", jQuery(s.nTable).attr('id'));

This adds clone-id to the fixedheader div so that each table has its own identifier.

On the application, I've added something like this to move fixedheader inside the proper div

$('div[clone-id="'+a.tabId+'"]').each(function() { $(this).appendTo("#"+a.tabId); });

(of course variables are different, but you use a dynamic tab system, so that you place tabid within each one, and it will make sure they are properly placed inside each tab. There's a cleaner way to do this, I just wrote this up for my app.

Without this fix, when you move from tab to tab, it keeps the existing fixedheader div from each tab still active, making the page look cluttered with the wrong headers.

I do know you can also use oFH.fnUpdate(); to update the fixedheader, but dynamic structure like this, it does not work. I've tried many ways to make that work. The best thing for fixedHeader is place the div under the table and add the correct identifier. Otherwise you are left with cloned divs in the footer that have no real direction.

DataTables commented 10 years ago

Hi - nice solution - I like this. Thanks for sharing it! I've been thinking about having an enable / disable function for FixedHeader which would have the fixed elements attach and detach as needed. What would be really nice is automating it, but that seems to be a little beyond what we can rely upon in browsers atm (mutation events). I guess what would be really nice is for DataTables to have a single event that it fires which all plug-isn can listen for and update themselves as needed - which would at least mean that there is only one thing to call!

timothymarois commented 10 years ago

Is it possible to append the fixedHeader div class within the div the current table is located in, or what if there was an option to put the "#selector" of where to place the div, and by default do what it does now. but the idea is to have fixedheader be as close to or within the same element as the table itself.

DataTables commented 10 years ago

I don't see why it wouldn't be possible. I didn't do it that way originally as it adds a bit of complexity, but perhaps I should revisit that.

DataTables commented 8 years ago

FixedHeader has fixedHeader.enable() and fixedHeader.disable() methods now (as of v3). It attempts to do some automatic detection of the table - if it is hidden then the header won't be enabled by default. I think that's probably as far as we can take it without proper DOM mutation listeners.