DataTables fixedHeader and Bootstrap nav-bar with fixed-top

VolkhardV

Hello,
i´m using Datatables with a fixedHeader:true and a bootstrap nav-bar with fixed-top-class.
When i scroll down the page the table header disapperars. My expectation is, that the table-header should be fixed to the bottom of the nav-bar. When i remove bootstrap´s fixed-top it works - but then the page-header disappears on scrolling.

Here is a sample link: https://customer.vogeler-ag.de/obi/intranet/test

Can anyone help?
best regards
Volkhard

tangerine

I'm not seeing where you include the FixedHeader extension js.
https://datatables.net/extensions/fixedheader/

VolkhardV

Hello Tangerine,
now i added the fixedHeader-Extension - but it also doesn´t work.

best regards

Volkhard

colin

I suspect the problem is because your site already has a fixed header, the OBI strip at the top. You'll need to set an offset for the DataTable's fixed header to ensure it goes beneath. These two examples, here and here, should get you going,

Colin

VolkhardV

Hello Colin,
thanks - this helps.:)

One more Question: it is also possible to fix the area of the DOM-Elements (PageLength-Control, Search-Control, etc..)?

best regards

Volkhard

tangerine

Placement of the table controll elements is determined by the dom options.
https://datatables.net/reference/option/dom

VolkhardV

Hello tangerine,

thanks for this.
i wasn´t successfull with this - how can i fix the dom-elements together with the table-header? where do i have to place the dom-elements?

best regards

Volkhard

tangerine

i wasn´t successfull with this

Why not? What did you do? What happened?

how can i fix the dom-elements together with the table-header?

I don't understand the question. Placement of table control elements is independent of fixedHeader.

where do i have to place the dom-elements?

dom definition goes in your DataTables initialization code, as clearly shown in the link I gave you.

VolkhardV

Hello Tangerine,
sorry - i was explaining bad.

On the testpage https://customer.vogeler-ag.de/obi/intranet/test you can see under the Headline "index" the dom-controls (e.g. pagelength, filter).
When you scroll down the page, those dom-controls disappear.
I want to fix them too together with the table-header: so those controls are also visible when you scroll down the page.

best regards

Volkhard

kthorngren

See if this thread helps.

Kevin

VolkhardV

Hello Kevin,

yes - thanks! this helps!

best regards

Volkhard