How can i show search bar with fixed header?

xaki85

Im using Datatable for one of my projects....a great plugin indeed, one thing i want to ask that How can i show search bar with fixed header? when I scroll down, header is fixed but i lose default search bar of datatable and nothing is shown above the header, how can i show default search bar or some of my custom filters within fixed header???

990consulting

I'm also interested in keeping the search bar and the editor buttons fixed at the top of the page, even as I scroll the data table. One possibility would be to create separate form elements and associate the same Javascript events with them, but it's a little opaque how to do that, since the logic for the placement of these controls seems to be defined outside the user-defined code.

kthorngren

I'm no CSS expert but is this what you are looking for?
http://live.datatables.net/rahetive/1/edit

It uses the dom to place the buttons and search input into a div with a class that uses position: sticky. Also fh-fixedHeader is used in the div to offset the FixedHeader.

Haven't tested this so not sure how compatible or what other configs are needed to make it work properly. Hopefully it gets you started.

Kevin

990consulting

Not quite, but when I discovered that you can put a scroll bar on the side of the data table itself, it solved the problem. The goal is to keep the editor buttons visible at all times. You can do that by making the buttons sticky, or by making the table scrollable. Sticky buttons is hard as hell, but scrollable table is just a setting:

https://datatables.net/examples/basic_init/scroll_y.html

allan

Yes, scrollY is basically another way of achieving what is basically a fixed layout.

If you didn't want the internal scrolling, then Kevin's suggestion of position: sticky is absolutely the way to go in modern browsers.

Allan

xaki85

@kthorngren it really looks good, I appreciate your effort, now I try to apply that fixed at my end, hopefully things will be all good.

Thanks you too @allan ...

Unlimited

Hello. These topic is about I am looking for.. but it does not work in responsive layout tables. (I am using BS4, but it has nothing to do with it) I mean sticky solution e.g. in example above
http://live.datatables.net/rahetive/1/edit
If the search-bar with buttons are wrapped to more lines, then table header is still showing on its base position for full-screen. Any idea, how to recalculate a sticky table header position?
Thanks!

Unlimited

Hello. I was able to do it via:
dataTable.fixedHeader.headerOffset()
but it does not work for 100%.
From some small responsive width, from the header two first columns are lost:

Any idea? On a wider screen, it works properly.

Unlimited

Ok, again solved myself with nbsp in header for two first cols.