FixedHeader - Allow specific target for docking the header

Azaret

Hi,

I'm working on a huge project with lot of data, and for some listing, to have docked headers and footers could be a great improvement. In order to save time, I'm interested by using FixedHeader with my datatables, but unfortunately it's not working well in our specific environment.

See, we choose to work in a "desktop" way, by that I mean that we use floating dialogs with jquery UI in a web desktop. In our datatable dialogs, we have some panels and toolbar, and a datatable. So basically, we have our body page, with into it an absolute desktop layout, with into it some absolute dialogs, with into it some absolute panels, and with into one of these panels, our datatable.

So, for the moment with FixedHeader, it's just not working, first because putting the header on the body make it invisible (the desktop layout is overall), then it could be wider than a dialog (if our table is wider than the scroll panel). We try some workaround, by editing FH, adding the possibility to put another target than the body, which is working not badly, but then the scrolling is not working well, I guess because it's linked to the body again, but I'm not comfortable in the FH source code. And honestly it's not really the best way to work, as if for some reason you update the library, or we don't update, or we spend more time to modify it, not really efficient.

So, concretely, I would to know if it is possible to have FixedHeader updated with this possibility of having the header (and the others fixed elements by the way) to another target than the body or a direct absolute parent.

I hope you got what I was trying to say, if you need any information tell me.
Thanks you.

allan

FixedHeader currently assumes that the whole document will be used, however, perhaps simply the y-scrolling option of DataTables is more what you are looking for: http://datatables.net/release-datatables/examples/basic_init/scroll_y.html ?

Also there is another fixed header type plug-in which supports DataTables which might be of interest: http://programmingdrunk.com/floatThead/#intro

Allan

Azaret

I'll look into the second plugin, by the way, for you picture better what I mean, there I put some part of our code and how it works :
http://jsfiddle.net/azaret/mqERQ/

allan

Okay, so why not just enable sScrollY: http://jsfiddle.net/mqERQ/23/ ? There looks like there is a CSS conflict somewhere with the header, but the basic idea perhaps works for you?

Allan

Azaret

Hmm not really, see ft-table/main-panel is stretch to the dialog, so there is no fixed height and width.
If I put scroll x and y at 100%, the table will just overflow, also if I resize the dialog, the headers are not updated.

Though I come with something by setting the head in fixed position, but still no update of the render, is there a api function for update ? At worst I could update the header on dialog resize event...

EDIT: http://jsfiddle.net/azaret/mqERQ/32/

allan

I see - in which case, you could consider an approach such as this: http://live.datatables.net/uvinax/edit#javascript,html

Allan

Azaret

Hmm, trying to make this work in my environment, but it's not working that well, even disabling the css rules that could interfere. Also when I set scrollY, .dataTables_scroll children are setting a fixed width instead of 100%. But there is almost no css rules on these elements on my base. Note that in my example the absolute layout is between #datatable-_wrapper and .dataTables_scroll, not sure if it matters.

Also it become messy when I switch the nowrap mode, which is mandatory in my case, the final user must be able to switch between these two states. Also I know my boss, he will dislike the vertical scrollbar hidden. So it's not really working.

FixedHeader seems to work better for rendering, there is the workaround for it : http://jsfiddle.net/azaret/P98ra/
It's working like a charm, tough in fact, I disabled the "scroll" thingy of FH because fixed position is not working in horizontal scrolling, so my modification won't work in example like the FH' doc. But maybe this could give some idea to make something out that could work in any situation. I know that my edits are bad, but as I said I'm not comfortable with your code, and I'm not sure of the best way to edit FH properly.

I would better use FH, because I like the idea to have also tfoot and the left column docked. Not in the example we test today, but in Resources agendas dialog, in the same project, it could be interesting to have left column docked, but I don't use datatable on my agendas.

So, Thanks for your help today
Your doing great job, so keep it like that.

ashutoshrgec

Hi Allan,
Can we have datatable with fixedheader with column resizing functionality.
Is there any exmpale.

Thanks
Ashutosh

allan

There is no example for that currently, but you should just need to call fnUpdate on resize (the FixedHeader API method, not the DataTables one).

Allan